Result
http://jsfiddle.net/kachibito/PgYM6/2/embedded/result,js,css,html
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>