class指定もいらない超お手軽スムーズスクロール

HTMLソースはいたってシンプル。というか何も特別なことはしません。アンカー貼るだけ。

HTML

1. <p id="hoge">ほげ（ここにスクロール）</p>
2. <p><a href="#hoge">ほげにスクロール</a></p>

Emotional Webさんのソースとどう違うか少し解説していきます。

まず、2行目で「a」要素をクリックした時にもう関数が動くようにしています。
3行目でクリックしたaタグのhrefを変数にしています。
4行目で「ページトップへ」用の振り分けです。ページトップだけは、サイトの一番上にスクロールしないと困るので、hrefつまりリンク先URLの指定に「#siteId」と入っている場合は、5行目で一番上（body要素）に飛ぶようになっています。
うちの場合は、ロゴを「siteId」というIDにしているので、「#siteId」ですが、ここは#headerでも#topでも実際に当たっているIDならば自由に変更可能です。

7行目からが今回のポイントですね。
リンク先URLの0番、つまり1文字目が「#」の時にスムーズスクロールの関数が動くようになっています。
ページ内リンクの場合、必ず1文字目は「#」になることを利用しています。
8行目は言わずもがな、クリックしたURL（アンカー）に向かってスクロールしていきます

まぁ、非常に単純なのですが、いちいちclass振らないで良いし、便利かなと思ったのでした。

動きはmixiリニューアルに伴う改悪の記事内でアンカーをいっぱい貼っているので試してみてください。現在は動きません。

ソースは上記のみなので、もし使いたい方はコピーして新規JSファイルに貼るなり、interface.js内に直接貼り付けちゃってください。

追記

スムーススクロールについてポストした後も調べていたら、こんな記事が。

ScrollToAnchors　ページ内アンカーにスムーズスクロール＠KADOYAN.com

なんてこったい…。こんなシンプルなソースで実現できたのね…。

で、ページトップ用の条件分けを追加してテストしてみたら、動きがバグってしまった。なんでだろう…。
いまいちわからなかったりします。KADOYAN.comさんで言われているようなMac Safariでのバグも起こらないので、とりあえずこのままで良さそう。

追記２

jQuery1.2.1ではinterface.jsのスムーズスクロール機能はエラーが発生するので、jQueryバージョンに注意してください。

jQuery1.2.1でinterface.jsにバグ？

追記２．１

interface.jsのコードを修正することで対応できるようです。
no2xさんからアドバイスをコメントにて頂きましたので、そちらを参照してください。

追記３

2008/2/11追記
2008/3/4修正。アンカーのあるURLへのリンクが作動しなかったため、１～5行目までを修正しました。

新しく書き直したので、こっちのソースを参照してください。
（このエントリーはアクセス数が多かったので、ちゃんと動くものにしておきたかったので…）

Javascript

1. var url = "http://" + location.hostname + location.pathname;
2. $('a[@href*="#"]').click(function() {
3. var id = this.href.substring(this.href.indexOf('#'),this.href.length);
4. var hrefUrl = this.href.split(id);
5. if(hrefUrl[0] == url) {
6. if(id == '#header') {
7. $('body').addClass('body');
8. $('.body').ScrollTo('slow');
9. $('body').removeClass();
10. return false;
11. }else{
12. $(id).ScrollTo('slow');
13. return false;
14. }
15. }
16. });

5行目の条件文は、ページトップにID（name）名指定なしでスクロールするためだけに書いてあるものなので、一律「#」に飛ばしたいだけの方には不要です。 内容としては、一度bodyタグに「body」というclass名を与えてスクロールさせ、その直後にclass名を削除します。結構無理矢理ですが…。

関連リンク

• ScrollToAnchors　ページ内アンカーにスムーズスクロール＠KADOYAN.com
• Interface.jsで簡単スムーススクロール - Emotional Web
• jQuery: The Write Less, Do More, JavaScript Library
• Interface elements for jQuery - About Interface