ページ内リンクをスマートにする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で動かない。ページ下部へのスクロールがスムーズではないときがある等のバグを修正しました。

関連エントリー

アルファ画像を扱うalphafilter.jsライブラリ
ie以外でもクリップボードが使えるsetClipboard.js
一番簡単な画像置換の方法-imageReplace.js-
AjaxやJavaScriptのライブラリー

スポンサードリンク

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

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

おお、これいいですね

投稿者: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

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

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

こんにちは。

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

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

宜しくお願い致します。

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

>nishiuraさん

ありがとうございます。
バグがあったようですので修正しました。

投稿者:西畑一馬 | 2010年8月31日 21:15

Google chromeのバグ修正に差し替えたら、IEでうまく動かない(少し下に下がるだけ)になってしまいました・・・
なんとかできないでしょうか。対処の仕方があればお願いいたします。

投稿者:ののこ | 2010年12月11日 17:34

>ののこさん

IEでの動作することは確認しておりますので、なにか別の要因かも。どのようなページで、どのバージョンのIEで動作しないか詳しく教えてください。

投稿者:西畑一馬 | 2011年1月11日 13:47

とても使いやすいjsですね!
ただ、はじめ、設置しても動いてくれず悪戦苦闘しました。
原因はid(id="test_01" 等)にアンダーバーを使っていたためのようです。
もし、正常に動作しない方がいたら、確認してみてはいかがでしょうか。

投稿者:もも | 2011年2月 7日 15:09

気持ちのいい動作をするjsですね!

jsは素人なのでほとんどわからないのですが、
自分でブログスキンをつくりたかったので、早速お借りしました。

ところが、smoothScrollを加えたあとに、
今まで正常に動いていたほかのjsが動かなくなりました。
動かなくなったものもよそからお借りしたjsなのですが、
記事の続きをクリック開閉するものです。

openボタンで開く動作は問題ないのですが、
closeで閉じなくなりました。
closeボタンにフォーカスすると「javascript:void(0)」
とIEウィンドウの左下にコメントアウトされています。

どうしたら動くようにできるのでしょうか。。。
どうかご指南ください。

投稿者:トチノ | 2011年2月13日 01:31

先日コメントした者です。

その後、複数のリンク箇所に同じ不具合が出てしまったので、
自分のスキルでは無理だと判断し、
別のスクローラーを使うことにしました。

勝手に自己解決してしまい、申し訳ありません。
前回のコメントが未承認で残っていましたら削除ください。

それでは、失礼しました。

投稿者:トチノ | 2011年2月15日 18:18

適用させたくない要素を設定できるところが、とても使いやすく愛用しています。

今回 jQueryプラグインのfancybox.js と一緒に使いたいと思っているのですが、スクロールの動作が安定せずうまくいきません。
(win7,XP Chrome IEでだめでした)

解決方法を教えていただけると助かります。
どうぞよろしくお願いします。

---------------------------------

XHTML 1.0 Transitionalで作成、
fancyboxは(jquery.fancybox-1.3.4.js)、
inline要素をポップアップウィンドウで表示する指定にしてます。

fancybox.js適用のリンクには、id要素とclass要素を指定してあり、ここにはsmoothScroll.jsを適用させたくないので、
下のようにしました。

<a href="#data2" class="inlinebox" rel="nofollow" >(fancyboxの指定)
 
   ↓ ↓ ↓
 
<a href="#data2" class="inlinebox noSmooth" rel="nofollow">(noSmoothを追加)
投稿者:momo | 2014年3月13日 12:06

momoさん、ソースコード上の以下の変更はおこなっているでしょうか?

var attr ="data-tor-smoothScroll"

var attr ="class"
投稿者:西畑一馬 | 2014年4月10日 15:35
コメントを投稿