「ページの先頭へ」などのハッシュタグ付き（#）のリンクを滑らかに動かすことができるsmoothScroll.jsのご紹介です。
javascriptファイルを<head>内に設置すれば動きますし、滑らかに動かしたくないリンクの除外設定もできますので重宝します。
smoothScroll.jsのダウンロード
以下のサイトよりsmoothScroll.jsのファイルをダウンロードします。smoothScroll.js
smoothScroll.js の設置
<head>内にjavascriptファイルを設置するだけで、<a href="#hoge">のハッシュ付きのリンクを滑らかに動かします。
|
1 2 3 4 5 6 7 |
<head> <script type="text/javascript" src="./smoothScroll.js"></script> </head> … <a href="#footer">footerへ進む</a> |
除外設定
ハッシュタグ付きのリンクの中で滑らに動かしたくないという場合は、HTML5のカスタムデータ属性data-tor-smoothScrollを利用することで、特定のリンクを除外できます。
|
1 |
<a href="#header" data-tor-smoothScroll="noSmooth">スムーズしない</a> |
コメント