delalunaofficedaysのブログ

WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

ページ内リンクのjQueryスムーズスクロール自分用まとめ

[code] <a href="#scroll1" class="scroll">1へ飛ばす</a> <a href="#scroll2" class="scroll">2へ飛ばす</a> <a href="#scroll3" class="scroll">3へ飛ばす</a> <a href="#scroll4" class="scroll">4へ飛ばす</a>

<div id="scroll1">リンク先1</div> <div id="scroll2">リンク先2</div> <div id="scroll3">リンク先3</div> <div id="scroll4">リンク先4</div> [/code]

[code] $(function() { $(".scroll").click(function(event){ event.preventDefault();

var url = this.href;
var parts = url.split(&quot;#&quot;);
var target = parts[1];

var target_offset = $(&quot;#&quot;+target).offset();
var target_top = target_offset.top;

$('html, body').animate({scrollTop:target_top}, 1000);
});

}); [/code]