jQuery：ページ内リンクのスムーススクロール
jQueryでプラグインを使わずにページ内リンクのスクロールをスムースにする方法です。
HTML
HTMLは特段何も気にすることなく組んでください。 #wrapperや#headerなど、ページの最上部に位置する要素に任意のidが割当てられていればOKです。「ページトップ」など通常通りリンクを張ってください。<div><a href="#header">ページトップ</a></div>JavaScript
移動時間だけで早さを調整しようとすると、縦に長いページの場合に移動速度が速すぎる状態になってしまいます。なので、最低速度を設定の上で、移動距離の○分の1の倍率で速度を算出する仕組みになっています。<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var rate = 15; //倍率
var minspeed = 200; //最低速度
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
var speed = Math.abs($(window).scrollTop() - $(hash).offset().top) / rate + minspeed;
$('html,body')
.animate({scrollTop: $(hash).offset().top}, speed, "swing");
return false;
});
});
</script><script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>$("a[href^=#]")$('a[href^="#"]')
