ページ内リンクをスマートにするsmoothScroll.js

ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。

どういったものかはサンプルで確認してください。

<a href="#header">ページの先頭に戻る</a>

などのページ内リンクをスムーズな移動に変更します。
これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。

設置方法は簡単です。

smoothScroll.jsをダウンロードして、設置したいページで取りこみます。

<script type="text/javascript" src="./smoothScroll.js"></script>

特定のリンクはスムーズさせない

smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#付きのリンクを利用していて、そこに関してはスムーズスクリプトに変換したくない場合は次のように記述してください。

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

HTML5のカスタムデータ属性「data-tor-smoothScroll」に対して「noSmooth」を指定することでスムーズを抑制することができます。

HTML5以外で特定のリンクはスムーズさせない

HTML5のカスタムデータ属性を利用したくない場合は、smoothScroll.jsの14行目を次のように変更してください。

var attr ="data-tor-smoothScroll";

↓

var attr ="class";

そうするとclass属性に対して「noSmooth」を指定することでスムーズを抑制することができまるようになります。

MITライセンスで公開しておりますのでご自由にご利用ください。

修正情報

2011/02/13 カスタムデータ属性を利用したスムーズの抑制機能を追加しました。
2010/08/31 Google Chromeで動かない。ページ下部へのスクロールがスムーズではないときがある等のバグを修正しました。

スポンサードリンク

日時: 2007年7月12日 14:34
javascript, jsライブラリ
javascript

«FeedReaderをFastladderに変更 | メイン | jsライブラリで実装する効率的なWeb制作(Web標準の日々)»

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/182

コメント

おお、これいいですね

投稿者:SEOサプリ | 2007年7月13日 08:18

＞SEOサプリさん

ありがとうございます。

気になる点などがあったら、ご指摘いただけたらと。

それでは、東京でお会いできるのを楽しみにしてますので

投稿者:西畑 | 2007年7月13日 22:13

初めまして
このJSとってもクールな動作をしますね！
記事にも書かれているとおり、これさえあれば
ページ内リンクだとしても、ユーザーが違うページに
飛んだと勘違いをする事を防ぐ事が出来ますね
実際、当方もページ内リンクでいきなりカッと飛ぶと
勘違いしてしまう事があります（笑）
ただ、物凄く便利なJSでありがたいのですが
ファイヤーフォックスでは動作しませんでした
改良を色々と試みてみたものの当方、JSの知識が浅いため
なかなか解決できません
どうか解決のヒントをいただけないでしょうか？
よろしくおねがいします

投稿者:もす | 2008年6月13日 23:14

>もすさん

サンプルの方は、ファイヤーフォックスで動きますよね？
設置されたサイトの何かが干渉しているのかも・・・

id属性でのページ内リンクでしょうか?name属性のページ内リンクには対応しておりませんので、その場合はid属性に変更していただけたらと

投稿者:西畑一馬

| 2008年6月18日 03:26

サンプルもfirefoxでは動作しなかったのですが
なぜか3.0にアップデートすると動くようになりました
firefoxにいろいろアドオンやらテーマやらをつめ過ぎて調子が悪くなっていたのでしょうか・・・
ページ内リンクの設定は最初からidで行っていたため、逆にnameに変えて試したりしたものですが
やはり突然firefoxでも動くようになった事が疑問に残ります
念の為、母親のラップトップにfirefox2.0をインストールして
2.0では動作しないのだったのか試して見ます
干渉についてですが、ほかのJSと変数の名前がかぶっていたりとかはありませんでした

投稿者:もす | 2008年6月21日 14:33

>もすさん

私のFirefox2では動作しているので、なにかアドオンが原因だったのかもしれませんね。

投稿者:西畑一馬

| 2008年7月 1日 00:37

はじめまして
ちょうど探していたｊｓだったのでかなり感謝いたします＾＾
いままで『もす』さんと同様に、普通にtopに飛ばしていたので正直「なんかなぁ・・・」とか思ってました。
動作も問題なくいけます。
（火狐の場合ラグがあるのは私だけかな？）

投稿者:Chaki Ramone | 2009年2月 4日 19:58

こんにちは。

Google Chromeでは動作しないみたいなのですが、上手く動作できる

方法がございましたら、教えてくださいませ。

宜しくお願い致します。

投稿者:nishiura | 2010年8月14日 14:15