【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

4Nov2011

ヌルッとページ内リンクをスクロールさせるライブラリ

ページ内リンク

ネットショップでは目的の商品を探しやすくする為に、ページ内リンクを使う場面が多いと思います。

ページ内リンクは便利ですが、一瞬どこへ移動したのか見失ってしまうのが欠点ですよね^^;

今日ご紹介するJavaScriptライブラリを使えば、リンク先に移動する際にスマートフォンのように「ヌルッ」とスクロールさせる事ができます。

smoothScroll.js

こちらのサイトで配布されています。
to-R

サーバーの任意の場所にダウンロードして、使いたいページのhead内で外部ファイルとして呼び込めば準備完了です。

このライブラリはとても軽くて信頼性が高く、HTML5にも対応しています。

最も優れた所は

既存のハッシュタグ(#)付きページ内リンクに適用される

という点。

各リンクに個別にタグを書き加える必要はありません。

適用させたくない箇所には

smoothScroll.jsを適用させたくないリンクには、以下のように一言だけ付け加えます。

html5でコーディングしている場合

スムーズなし

html5以外

JavaScriptファイルの14行目を書き換える

var attr ="data-tor-smoothScroll";

変更後

var attr ="class";

ページのリンク部分にclass属性を追加

スムーズなし

WordPressのトップページでは動かず

HTMLで作ったサイトのほうで快調に動いていたのでWordPressのほうでも使ってみようと思い準備をすると、なぜかトップページでは動かず。。。

詳しく調べてはいないので簡単なコーディングミスの可能性もありますが、とりあえずご報告です。

関連記事