2011年11月15日火曜日

スムーズスクロール JS (今回wordpressで喧嘩しなかった)

jQueryでページ内リンクをスムーズに移動。
そして止まる位置の調整も速さも調整出来る。


(以下の2つを読み込んで)
jquery.js
jQuery Easing Plugin(jquery.easing.js)
 

(以下をheader内に記述)

<script language="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 = 1200;
    var targetOffset = target.offset().top - sclpos;
    $('html,body')
     .animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
    return false;
   }
  }
 });
});
</script>

通常のページ内リンクをhtml上に記述すれば完成。
※Wordpressの場合は$をjQueryに変える(4箇所)
 
参考URL
http://www.detelu.com/blog/2008/09/jquery%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/ 

0 件のコメント: