そして止まる位置の調整も速さも調整出来る。
(以下の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 件のコメント:
コメントを投稿