2014/07/23 (更新日: 2016/08/14)

【jQuery】かんたんに『ぬるぬるスクロール』を実装する方法

サイト開発でよく使われるぬるぬるスクロール。
毎回ググルのがだるかったので、備忘録的にまとめていきます。

ぬるぬるスクロールのHTMLソース

<a href="#scroll">ジャンプ先</a>

リンク先に＃をつけるだけです。
とてもシンプル。

ぬるぬるスクロールのJavascript

フッターで以下のスクリプトを読み込みます。

<!-- まずはjQueryの読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

なんと、以上で完了です。
ちなみに、上記ソースの『var speed = 1000;』の部分でぬるぬるの速度調整ができます。個人的には1000くらいだちょうどよいかと思います。

jQuery動かないよーって人は以下を参考にどうぞ。
» jQueryが動かない場合に簡単に動かす方法・手順【初心者向け】

JavaScript