Web アプリ

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

投稿日:2018年3月5日 更新日:

こんにちは!シミダイ(@shimidai2100)です。

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

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


ディレクトリ構成

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

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

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

HTML記述内容(index.html)

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

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

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

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

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

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

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

https://code.jquery.com/jquery-3.2.1.slim.min.js

他にも「Ajax」の機能もslim版には入っていないので注意してください。

JavaScript記述内容(smoothscroll.js)

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

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

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

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

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

スポンサードリンク

関連記事

-Web, アプリ

Translate »

Copyright© shimidai2100 , 2018 All Rights Reserved.