【Javascript(jQuery)】スムーズなスクロール
注意点

・jqueryを使用しています。ご利用の際はjqueryを合わせて読み込んでください
※バージョンは「1.12.4」で確認しています

スポンサーリンク

スムーズなスクロール

jQueryを使用して、スムーズなスクロールを実装しています。下記ソースで実装しています。
※よく見かける手法です

jQuery(document).ready(function($){
    /*----------------------------------------------------
     href属性が#で始まるaタグをクリックした場合に処理
    ----------------------------------------------------*/
    $('a[href^="#"]').click(function() {
        var href= $(this).attr('href');
        var speed = 400;
        var target = $(href == '#' || href == '' ? 'html' : href);
        var position = target.offset().top;
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

使い方

aタグのhref属性に「#」もしくは「#～」と指定すれば使用できます。「#」と指定すると「表示しているページの上部へ」、「#～～」と指定すると「～～」の部分に指定されたIDを持つ要素へとスクロールします。
※「#abc」であれば「id=”abc”」おid属性で指定されている要素へとスクロールします

・ページ上部へ

<a href="#">ページ上部へ</a>

・ID「abc」へ

<a href="#abc">id="abc"が指定されている要素へ</a>

スポンサーリンク