Webサイトのページが縦に長くなってしまった場合、よくあるのが、というより必須なのがページ下部につける「ページトップへ」のリンク。
つけるのはいいのですが、実際のこのリンクをクリックしてみると一瞬でページトップへジャンプしてしまうため、ユーザーがどこへジャンプしたのか一瞬把握できなくなるということがあります。
そこで使えるのがこのスクリプト。
「ページトップへ」のリンクに仕込んでおけば、スルーッと上までスクロールしてくれます。
使い方は簡単。
まず、下の関数をコピペします。
function pageTopScroll() {
var scrj = 1;
var scdist = document.body.parentNode.scrollTop;
if(scrj<50 && scdist) {
scdist = (scdist>2) ? Math.ceil(scdist*.2) : 1;
scrj++;
scrollBy(0,-scdist);
setTimeout("pageTopScroll()",20);
} else {
scrollTo(0,0);
scrj = 1;
}
}
で、リンクにはこんな感じで仕込む。
<a href="javascript:pageTopScroll()">ページのトップへ</a>
以上。
