2014.4.21.Mon. 10:26
「ページトップへ戻る」等のページ内リンクをクリックした際に、画面がするすると滑らかにスクロールして該当箇所にジャンプする「スムーズスクロール」を、簡単に導入出来るスクリプトを紹介します。
通常のページ内リンクは、同一ページ内の特定箇所へのジャンプなのか別ページの特定箇所へのジャンプなのかがエンドユーザーに分かりにくいですが、これを導入する事でその紛らわしさを回避出来ます。
<head>
〜</head>
内にて、「smoothScroll.js」を外部ファイルとして読み込むだけです。
これにより、<a>
のhref
属性が#
で始まるリンク全てに、スムーズスクロールが適用されるようになります。
<script type="text/javascript" src="smoothScroll.js"></script>
yetii.js等、他のJSで#
で始まるリンクを使用していて、その箇所にはスムーズスクロールを適用させたくないという場合には、次のようにします。
var attr ="data-tor-smoothScroll";
「smoothScroll.js」の14行目に、上記のような記述があります。
このdata-tor-smoothScroll
の箇所を、class
に記述変更します。
そして、スムーズスクロールを適用させたくないリンクに、以下のようにクラス名を付加します。
<a href="#pagejump" class="noSmooth">〜</a>
なおdata-tor-smoothScroll
とは、HTML5でのカスタムデータ属性です。
その為HTML5においては、JSの記述内容を変更する事なく、以下のような記述でスムーズスクロールを適用させないようにする事が出来ます。
<a href="#pagejump" data-tor-smoothScroll="noSmooth">〜</a>
また当ブログは既に「smoothScroll.js」を導入済みであり、フッタの「ページトップへ」というリンクが同様の動作をします。