スルスルスクロール

jQueryでページ内リンクをスムーズにスクロールさせてみました。
「このページのトップへ」みたいなリンクをクリックすると、スルスルスル～っと動く感じですね。

今回、こちらのサイトを参考にさせて頂きました。
jQueryでページ内スムーズスクロール – 1：n – DETELU Blog

使うのはjQueryとjQuery Easing Plugin。

追加するjavascriptは以下。

$(function() {
　$('a[href*=#]').click(function() {
　　　if (location.pathname.replace(/^\//,'') ==
this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
　　　var target = $(this.hash);
　　　target = target.length && target;
　　　if (target.length) {
　　　　var sclpos = 30;
　　　　var scldurat = 1000;
　　　　var targetOffset = target.offset().top - sclpos;
　　　　$('html,body')
　　　　.animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
　　　　return false;
　　　　}
　　　}
　});
});

これをscroll.jsとかにして保存。
次にmetaタグ部分に以下を追加。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>

HTML部分。

<div id="wrapper">
・・・中略・・・
<a href="#wrapper">このページのトップへ</a>

サンプルページ