2012-06-15

[jQuery] ページ内リンクのスムーススクロール

jQuery
主にページトップなどで使うことの多いスムーススクロール。
ページトップだけでなく、どこのページ内リンクにもスムーススクロールするには
プラグイン的なものもありますが、他のものとの相性がよくなかったりしたので、
普通にコードを書くことにしました。

<script type=”text/javascript”>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 800;// ミリ秒
// アンカーの値取得
var href= $(this).attr(“href”);
// 移動先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? ‘body’ : ‘html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
</script>

こういうよく使うjQueryを集めたライブラリみたいなものも最近はよくありますよね。
(最近でもないですかね、、)
自分でもそういうのを作っておくと便利かも。


参考サイト
http://www.coolwebwindow.com/weblife_column/coolweb/000301.php

Comment:

Trackback URL: