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

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

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

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

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

設置方法は簡単です。

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

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

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

~~若干下りの処理が甘いのが今後の課題かなと~~(2010/08/31 修正済み)

修正情報

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