【jQuery】かんたんに『ぬるぬるスクロール』を実装する方法
サイト開発でよく使われるぬるぬるスクロール。
毎回ググルのがだるかったので、備忘録的にまとめていきます。
ぬるぬるスクロールのHTMLソース
<a href="#scroll">ジャンプ先</a>
リンク先に#をつけるだけです。
とてもシンプル。
ぬるぬるスクロールのJavascript
フッターで以下のスクリプトを読み込みます。
<!-- まずはjQueryの読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 1000;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
なんと、以上で完了です。
ちなみに、上記ソースの『var speed = 1000;』の部分でぬるぬるの速度調整ができます。個人的には1000くらいだちょうどよいかと思います。
jQuery動かないよーって人は以下を参考にどうぞ。
» jQueryが動かない場合に簡単に動かす方法・手順【初心者向け】