jQueryを利用しない実装方法はこちらの記事を参照してください。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
});
});
</script>
</head>
<body>
<a href="#section1" class="scroll">セクション1へ</a><br />
<a href="#section2" class="scroll">セクション2へ</a><br />
<a href="#section3" class="scroll">セクション3へ</a><br />
<hr />
<a id="section1">セクション1</a>
<div style="height:600px">コンテンツ</div>
<a id="section2">セクション2</a>
<div style="height:600px">コンテンツ</div>
<a id="section3">セクション3</a>
<div style="height:600px">コンテンツ</div>
</body>
</html>
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
});
});
$(".scroll").click(function(event){
});
を記述することで、scroll クラスを持つ要素に対するクリックイベントを実装しています。 event.preventDefault();
により、イベント処理の中断をします。preventDefault についてはこちらの記事を参照してください。 var url = this.href;
var parts = url.split("#");
var target = parts[1];
クリックしたaタグのhref属性の値を取り出します。取り出し後 "#" でsplitして#より後ろの文字列を取得します。 var target_offset = $("#"+target).offset();
"#(アンカー名)" の要素のページ上部からのオフセットを求めます。リンク先のアンカーの位置が取得できます。 var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
アンカーの位置までスクロールをします。animate メソッドを呼び出すことで、スムーススクロールでスクロールします。