スムーズにトップにスクロールする

jQuery

jQueryを使用してスムーズにスクロールします。

以下ソース例です。

<script type="text/javascript">
$(function(){
$('a[href=#top]').click(function(){
var href = $(this).attr("href");
var target = $(href == "#top" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, 800, "swing");
return false;
});
});
</script>

<a href="#top">Top</a>
<a href="#topp">Top</a>

aタグのリンクが#topのアンカーをクリックした場合スクリプトが実行されます。

targetにはhrefが#topならhtml、それ以外ならhrefが代入されます。

positionはページの先頭です。

あとはanimateでページトップにスイングしています。800としていますが、小さくすると早くスムーズされます。

リンクを二つ設置していますが、#topの場合スクロールされますが、#toppの場合はhref属性になるため単なるアンカーの動きをします。この場合#toppなのでなのも起こりません。

DEMO

コメント

タイトルとURLをコピーしました