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>
If you want to buy a car, you will have to receive the loans. Furthermore, my mother commonly takes a bank loan, which seems to be the most reliable.