jQuery – ヌルヌルッとページ内スクロール
Posted on | 1月 20, 2012 | No Comments
スクロールバーがスルスルッと動いてページ内スクロールしてくれるスクリプト。
最近、増えてますよね。
従来のページ遷移のだとたまにページ内の位置が分からなくなったりもするので、これは結構便利です（後、なんか技使ってんな！感がする）。
jQueryと数行ちょこっと入れるだけで意外と簡単に実装出来るみたいなのでメモ。
リンク先IDで該当箇所に飛べます。
ちょこっと拾ってきたスクリプトのメモ。
javascript
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
HTML
<div id="top"> <ul id="sc"> <li><a href="#a" class="scroll">てすと１</a></li> <li><a href="#b" class="scroll">てすと２</a></li> <li><a href="#c" class="scroll">てすと３</a></li> <li><a href="#d" class="scroll">てすと４</a></li> <li><a href="#e" class="scroll">てすと５</a></li> </ul> <div id="a">てすと１のリンク先</div> <div id="b">てすと２のリンク先</div> <div id="c">てすと３のリンク先</div> <div id="d">てすと４のリンク先</div> <div id="e">てすと５のリンク先</div> <a href="#top" class="scroll">トップへ</a> </div>
スクロールのスピードは
$('html, body').animate({scrollTop:target_top}, 1500);
この部分の数字を変更。
数値が大きい程ゆっくりになります。もしくは「slow」「fast」などの動作パターンで。
↓ページ内スクロールを紹介されてるサイトさん。
- fine×3：ページ内を自在にスクロール | よく使うjQuery
上記のサイトさんではaタグを使わずにクリックのみで移動出来ます。
クリックしたリンク先を変数に格納して変数と同じ番号のリンク先に飛ばすパターンと、ページの上部に飛ばすパターンの２パターン。 - WEB-PARK.ORG：jQueryで簡単実装ページ内スクロール
こちらはaタグにクリック設定。
hrefの最初に「#」があるaタグのみに反応するようです。
他にもWEBクリエイターボックスさんの「少しのコードで実装可能な20のjQuery小技集」にも載ってますね。
こういうの見ると簡単にかけそうだな〜とか思うものの、なかなか自分じゃ出来ないんですよね。
ネットの波をググると便利なものがたくさん紹介されてますしね(^^;)
トラックバックURL:
Comments
Leave a Reply
