ページ内をスムーズに移動する超軽量スクリプト
実際の動作はこちらをご確認ください。
では、設置方法を説明します。
まず、「smooth.pack.js」を下のサイトからダウンロードします。5.66KBしかなくて動作も非常に軽いです。
smooth.pack.jsをサーバーにアップして読み込みます。
js
<script type="text/javascript" src="smooth.pack.js"></script>
次に、移動するためのリンクと移動先の設定です。
html
<a name="top" href="#footer">下に移動</a> [コンテンツ] <a href="#footer">下に移動</a> [コンテンツ] <a name="footer" href="#top">上に移動</a>
リンク先を#footerに設定すると「name="footer"」と書かれたリンクまで移動するという感じになります。
この例の場合、上2つのリンクは一番下のリンクまで、一番下のリンクは一番上のリンクまで移動します。
難点といえば、リンクがあるところにしか移動できない点でしょうか。
ページの量が多くなったときの目次など様々な場面でに使えそうです。
name属性はweb標準ではない
ところで、リンクでのname属性はweb標準ではありません。ただ、このままでも問題なく動きます。
将来的なことも考えてweb標準に則りたいという場合は、nameの代わりにidを使います。
html
<a id="top" href="#footer">下に移動</a>
で、smooth.pack.jsも変更する必要があるのですが、元々短いコードですし、変更するところは1ヵ所ですので問題ないと思います。
js
(1E9.name==l ;i=setILL+(9)+)という部分を
js
(1E9.id==l ;i=setILL+(9)+)
と変更するだけです。
主要ブラウザは一通り動作確認済みです。IE6でも大丈夫です。
フィードやTwitterで最新情報をチェック
@webpark2さんのツイート
上のコメントは削除したつもりですが、
削除になっていないようでしたら削除していただけないでしょうか？
はじめまして、こんばんは。当記事を拝見させていただき、早速試してみました。
結果を申しますと、一応動作はしたのですが、当方がイメージしていたようには動かなく、
ぐぐって調べてはみたのですが、どうも解決に導くことができませんでした。
その問題と申しますのが、各記事においての動作ではなく、
トップページ上で複数記事がある状態でこの動作をさせたいというものでした。
ちなみに使用したい機能としましては、トップに移動は使わず、
下に移動を使って記事のフッター部分に移動という形をとらせたいのです。
当方なりに考えた結論は、複数記事がある状態では
できないのではないのかなということでした。
問題の状態でそのままにしていますので、
よろしければ当方のブログで現状を見ていただければ分かりやすいかなと。
（記事の日付右側にある▼ボタンになります）
いきなり長々とコメント書いてしまいましてすみませんでした。
アドバイスいただけましたら幸いです。