十字架ラビアンローズ

スムーズなページ内リンクを簡単に導入出来るスクリプト「smoothScroll.js」の使い方を、動作サンプルと併せて詳細に解説します。

  1. トップページ
  2. Webサイト構築
  3. JavaScript
  4. スムーズなページ内リンクを簡単に導入出来るスクリプト「smoothScroll.js」

スムーズなページ内リンクを簡単に導入出来るスクリプト「smoothScroll.js」

2014.4.21.Mon. 10:26

「ページトップへ戻る」等のページ内リンクをクリックした際に、画面がするすると滑らかにスクロールして該当箇所にジャンプする「スムーズスクロール」を、簡単に導入出来るスクリプトを紹介します。
通常のページ内リンクは、同一ページ内の特定箇所へのジャンプなのか別ページの特定箇所へのジャンプなのかがエンドユーザーに分かりにくいですが、これを導入する事でその紛らわしさを回避出来ます。

「smoothScroll.js」の導入ステップ

<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」の動作サンプル

ページトップへ戻る

また当ブログは既に「smoothScroll.js」を導入済みであり、フッタの「ページトップへ」というリンクが同様の動作をします。

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ