シンプルなページ内スクロール
Result
jQuery
$(document).ready(function() {
//ハッシュリンクのアンカータグをクリックするとマッチするidを持つ要素にスクロールする
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 500);
event.preventDefault();
return false;
});
});
html
<div class="navigation">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
</div>
<div class="container">
<div class="section">
<h1 id="html">HTML</h1>
<p>テキスト</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>テキスト</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>テキスト</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>テキスト</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>テキスト</p>
</div>
</div>