てるてるブログ

てるてるぼうずの日常やらお勉強やら

jQuery – ヌルヌルッとページ内スクロール

Posted on | 1月 20, 2012 | 5 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">てすと1</a></li>
	<li><a href="#b" class="scroll">てすと2</a></li>
	<li><a href="#c" class="scroll">てすと3</a></li>
	<li><a href="#d" class="scroll">てすと4</a></li>
	<li><a href="#e" class="scroll">てすと5</a></li>
</ul>
<div id="a">てすと1のリンク先</div>
<div id="b">てすと2のリンク先</div>
<div id="c">てすと3のリンク先</div>
<div id="d">てすと4のリンク先</div>
<div id="e">てすと5のリンク先</div>

<a href="#top" class="scroll">トップへ</a>
</div>

スクロールのスピードは
$('html, body').animate({scrollTop:target_top}, 1500);
この部分の数字を変更。
数値が大きい程ゆっくりになります。もしくは「slow」「fast」などの動作パターンで。

↓ページ内スクロールを紹介されてるサイトさん。

他にもWEBクリエイターボックスさんの「少しのコードで実装可能な20のjQuery小技集」にも載ってますね。

こういうの見ると簡単にかけそうだな〜とか思うものの、なかなか自分じゃ出来ないんですよね。
ネットの波をググると便利なものがたくさん紹介されてますしね(^^;)

トラックバックURL:

Comments

5 Responses to “jQuery – ヌルヌルッとページ内スクロール”

トラックバック

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin