jQuery（JavaSrcript）でページ内リンクをヌルっとスクロール(スムーススクロール)させる方法

2018年3月5日2022年6月4日

Webページでヌルっとボタンを押すと、ヌルっと動くサイトありますよね？

仕事でちょこっと必要になって作成したので注意点も含めて記事にしたいと思います。

ディレクトリ構成

よくブログ等で公開しているのは、HTMLファイルに直接記載させる例がおおいのですが、

今回は↓のようにHTMLとJavaScriptを別ファイルに分けます。

SampleSite/
|
|--js/
| |--smoothscroll.js
|
|--index.html

index.html（ページ本体）
smoothscroll.js（スムーススクロールの動作を制御する）

HTML記述内容（index.html）

まずメインのindex.htmlを用意します。

「<a href=”#〇〇”」でスムース先を指定、「id=#○○」にスムースさせたい場所を記述します。

<!DOCTYPE html>
<html>
<head>
<!--JQueryのライブラリをロード-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--作成したJavaScriptをロード-->
<script type="text/javascript" src="js/smoothscroll.js"></script>
</head>

<body>

<!--helf="#○○"にスクロール先を記述-->
<a href="#smoothscroll">↓スムーススクロール</a>

<!--#○○の値をのidに記述-->
<div id="smoothscroll">

</body>
</html>

↓のJQueryのロードはHTMLファイル内で一番先に行う必要があるので注意してください。

idを指定すれば<div>タグ以外でもスムースさせることが出来ます。

注意は「JQuery」の「slim」版では動作しないので注意してください。

「min」版では正常に動くので安心してください。

slim版は以下のようにファイル名に「slim」が入っています。

JavaScript記述内容（smoothscroll.js）

スムーススクロールさせるための「smoothscroll.js」の記述内容は↓になります。

コピペでOKです。

$(function(){ 
    $('a[href^="#"]' + 'a:not(".carousel-control")').click(function(){ 
        var speed = 500; 
        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; 
    });
});

上記の例では0.4秒で指定の場所へスクロールさせます。

変数speedには500を指定すると0.5秒、1000と指定すると1秒で移動します。

つまり「１」＝「0.001秒」で移動させるということになります。

目安は400～800ぐらいだとスムーズに動くのでオススメです。