06 Oct 2007

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

最近ようやくjQueryに目覚めました。
面倒な指定がこれほど楽々と出来てしまうと笑いが止まりません。

言い過ぎました。そんなに笑えません。

あったらよさげなプラグインを一つ思いついたのでちくちく書いてたんですが、いつの間にかclass指定もrel指定もいらないスムーズスクロールのコードを書いていました。

interface.jsという有名なjQueryライブラリの応用です。

interface.jsについてはEmotional Webさんが解りやすい記事を書かれていたので、interface.jsの導入までのご参考にどうぞ。

Interface.jsで簡単スムーススクロール - Emotional Web

普通はPageTopとかに「#top」を指定したりすると思うのですが、それだけではもったいないなーと。
当サイトで実際に使っているソースを書いておきます。

以下のソースはIEで動かない場合があります。　ちゃんと動くコードは追記しました。

Javascript
  1. $(function() {
  2. $('a').click(function() {
  3. var jumpTo = $(this).attr('href');
  4. if(jumpTo == '#siteId') {
  5. $(document.body).ScrollTo(1000, 'easein'); return false;
  6. }
  7. else if(jumpTo.charAt(0) == '#') {
  8. $(jumpTo).ScrollTo(1000, 'easein'); return false;
  9. }
  10. });
  11. });

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名を削除します。結構無理矢理ですが…。

関連リンク
  • Oct 06, 2007 10:31 AM
  • コメント(22)
  • トラックバック(1)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント
もしもドロップシッピング

Related Entries

Track back

このエントリーのトラックバックURL

簡単に実装できるjQueryのスクリプト5選

イロイロとプラグインやらナンやら巷に溢れていますが、「そんな高機能はいらない」「もっとシンプルなのがいい」って思ってるあなたへ。今回はシンプルで簡単に実装...

Web Mugen - 2010年08月20日 23:03

Comments

1：no2x 2008年02月28日 03:26

はじめまして、「追記2」の記事の件ですが、jQueryのバージョンが上がって、仕様が一部変更になったみたいです。最近、JavaScript＆jQueryを使い始めたので正しいのかはよく解りませんが、以下にinterface.jsの実際に行った修正点を書いておきます。

-----
interface.js のソースファイルの「ifxscrollto.js」内を下記のように修正
jQuery.dequeue(z.e, 'interfaceFX')
　　　　↓
jQuery(z.e).dequeue('interfaceFX')
-----

これだけで、いけるようになります。（他のinterfaceパッケージも利用している場合は、ポイント部分を参照してください）
原因は、古いバージョンのjQueryには、拡張部分にdequeueがプロトタイプ宣言されていましたが、新しいバージョンになって、dequeueが独立して宣言されていました。

ポイントは、
jQuery(ここにオブジェクト).dequeue('タイプ')

ですので、interface.js のすべてのソースをこのように変更すれば、新しいバージョンのjQueryでも使えるようになります。
Linuxとかお使いでしたら、
-----
#interface1.2ソースの置き場のディレクトリに移動
unzip interface_1.2.zip
cd interface\ 1.2/
cat source/*.js > interface.src.js
#置換作業（下記１行で）
perl -pe 's/(jQuery)\.dequeue\((.+), (.+)\)/\1\(\2\)\.dequeue\(\3\)/i' -i.backup ./interface.src.js
-----

パックするには、
http://dean.edwards.name/packer/
とかのpackerを使えば快適になりますよね。余談でした。
以上報告でした。

2：飴 2008年02月28日 10:59

>no2xさん
コメントありがとうございます。

うわー！このinterface.jsの修正ポイントは本当に嬉しいです。助かります！
ありがとうございます！
パッケージの仕方まで細かく解説ありがとうございました＾＾

3：lubin 2010年11月22日 20:55

A Little off topic maybe, but anyway – which template are you using? I really love the CSS style.

4：nursing schools 2010年12月16日 20:48

Wow this is a great resource.. I’m enjoying it.. good article

5：Maya Bersch 2011年01月09日 04:26

I very find this a eyeopener. In no way looked at it in this way. In case you are heading to write some additional postings about this subject, I actually will probably be back soon! Btw your layout is really briliant. I am going to be utilizing something similar for my personal blog if it’s ok with you.

6：news live 2011年01月12日 15:46

I’d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!

7：Cell Phone Tech 2011年01月19日 07:24

It’s laborious to search out educated people on this subject, but you sound like you know what you’re speaking about! Thanks

8：Ugg 2011年01月19日 14:36

There are certainly loads of details like that to take into consideration. That is a great level to bring up. I supply the thoughts above as general inspiration but clearly there are questions just like the one you carry up the place an important thing shall be working in trustworthy good faith. I don?t know if best practices have emerged around things like that, but I'm certain that your job is clearly recognized as a fair game. Each girls and boys really feel the impact of only a moment’s pleasure, for the rest of their lives.

9：valium 2011年01月26日 01:06

Aw, this was a really nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and in no way appear to get something done.

10：wpolscemamymocneseo 2011年01月26日 21:57

An IPO based on projections of AdSense revenue isn’t in the future for the average eBusiness. Think of Google AdSense as supplemental income. Building a business solely on AdSense revenue isn’t just silly — it’s just plain stupid.

11：free movie download 2011年01月27日 03:45

i like it class指定もいらない超お手軽スムーズスクロール [Javascript,jQuery] - BlurBlue-pay courtship make an entry of at this time im your rss reader

12：Levitra 2011年01月27日 12:35

Spot on with this write-up, I really think this web site wants much more consideration. I’ll in all probability be again to read far more, thanks for that info.

13：free software download 2011年01月27日 22:01

i like it class指定もいらない超お手軽スムーズスクロール [Javascript,jQuery] - BlurBlue-Note after this im your rss reader

14：free software download 2011年01月29日 02:57

i like it class指定もいらない超お手軽スムーズスクロール [Javascript,jQuery] - BlurBlue-Note now im your rss reader

15：payday loans online 2011年02月02日 22:16

i like it class指定もいらない超お手軽スムーズスクロール [Javascript,jQuery] - BlurBlue-take notice of now im your rss reader

16：Rashida Can 2011年02月04日 04:31

I am genuinely not too informed with this subject but I do like to visit blogs for design thoughts and interesting themes. You actually expanded upon a subject that I commonly don’t like lots about and established it very entertaining. This is a good blog that I will take note of. I already bookmarked it for future mention. Ta

17：Mariam Lindbloom 2011年02月10日 16:38

Hey there, You have done an incredible job. I’ll definitely digg it and personally suggest to my friends. I'm sure they will be benefited from this web site.

18： kiev escort service 2011年02月11日 23:17

Hello dear, as a rule I never post comments on personal blogs however now I am afraid I must do it. Recently I wanted to install the newer version of the Firefox browser and your Internet blog doesn’t load properly ever since. Right now your footer overlaps part of the text and I am unable read it. I had the same problem with my herbal incense reviews site and I was able to fix it by changing the PHP code. Can you fix it? Thank you! Please excuse my crappy English, it’s not my mother language as you can see. I am French

19：PVC Fonster 2011年02月20日 02:30

I’ve been looking for something like this for a while now. What a great resource!

20：Andrea 2011年02月20日 07:56

I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here regularly. I'm quite certain I will learn many new stuff right here! Best of luck for the next! my website is about ed slott. would like some feedback if possible

21：Misty Mussell 2011年02月23日 05:10

Hello There. I found your blog using msn. This is an extremely well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will definitely comeback.

22：cinta monyet 2011年02月23日 13:21

I discovered your weblog web site on google and test just a few of your early posts. Proceed to keep up the superb operate. I just extra up your RSS feed to my MSN Information Reader. In search of ahead to reading extra from you afterward!…

Your Comment





Tag Cloud

About

drop

Author：飴（drop）

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読