ページ内リンクのjQueryスムーズスクロール自分用まとめ

2016年5月18日

<a href="#scroll1" class="scroll">1へ飛ばす</a>
<a href="#scroll2" class="scroll">2へ飛ばす</a>
<a href="#scroll3" class="scroll">3へ飛ばす</a>
<a href="#scroll4" class="scroll">4へ飛ばす</a>
<div id="scroll1">リンク先1</div>
<div id="scroll2">リンク先2</div>
<div id="scroll3">リンク先3</div>
<div id="scroll4">リンク先4</div>

$(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}, 1000);
    });
});