HTML
CSS
JavaScript
jQuery

[jQuery]スクロールの実装

jQueryを利用したスクロールの実装方法

sample.html
<html>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>


<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
</body>
</html>
sample.css
div{
  width:200px;
  height:200px;
  border:2px solid black;
  margin-bottom:10px;
}
sample.js
$(function(){
  $('a').click(function(){
    var id = $(this).attr('href');
    var position = $(id).offset().top;
    $('html,body').animate({scrollTop:position},500);
  });
});