メルです。
今日は、SmoothScroll.jsの紹介です。
このブログにも付いていますが、
ページ内リンクを滑らかに移動させる
JavaScriptライブラリです。
賢威だとページの右下に「このページの先頭へ」というのが
ありますが、これをクリックすると滑らかにページ上部に移動しますよね。
この機能を簡単に実装できてしまうのがSmoothScroll.jsです。
まずは サンプル をご覧下さい。
SmoothScrollの実装方法
Ajaxのライブラリではないので実装が非常に簡単で
手軽に使う事ができます。
無料で公開されていますのでまずはこちらから
ダウンロードしてください。
設置は簡単で、smoothScroll.jsを実装したいページで取り込むだけです。
具体的には以下のタグをhead内に記述するだけです。
<script src="smoothScroll.js" type="text/javascript"></script>
後は、移動させたい要素へリンクを張るだけ。
<a href="#header">ページの先頭に移動</a>
たったこれだけで実装できてしまいます。
特定の要素のみスムーズさせない方法
■HTML5
カスタムデータ属性「data-tor-smoothScroll」に対して
「noSmooth」を指定することでスムーズを抑制することができます。
<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>
■HTML5以外
smoothScroll.jsの14行目を以下のように変更します。
var attr ="data-tor-smoothScroll";
↓ ↓ ↓
var attr ="class";
こうする事により、class属性に対して「noSmooth」を指定し、
スムーズを抑制することができるようになります。
ネットビジネス速報メールマガジン
メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。
Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。
