スクロールしながらページトップに戻るボタン
2013年12月15日
Categories | ホームページ
最近チョイチョイこんなページ見かけるので、自分のページに実装してみました。
でぇ、どんなホームページかと言うと、帯状に長いページ下に良く見かける、
「PAGE TOP」
コレをクリックすると、ページがスクロールしながらトップに戻るんです。
サンプルページはこちら↓
https://www.hcz.jp/what/2010.html
ちょっとした演出効果ですね。
どこかのサンプルページを参考にし、自分なりにカスタムしてみました。
超簡単に作れるので、あなたもやってみたら？
実装方法をココに残しておきます。
まず、head内にこう記述
<script type="text/javascript" src="gotop.js"></script>
それからページ一番下にこう記述
<a href="#header" title="ページトップ" onclick="Scr_updown();return false;" >↑PAGE TOP</a>
ただそれだけです。簡単でしょ。
gotop.jsは自分でファイル作ってください。
中身は
function Scr_updown() {
var Doc=document;
var Scr_y=Doc.body.scrollTop || Doc.documentElement.scrollTop || Doc.scrollY || 0;
Scr_y= Math.ceil(Scr_y*0.1);
scrollBy(0,-Scr_y);
if(Scr_y>0){
var Tout=setTimeout("Scr_updown()", 20);
}else{
clearTimeout(Tout);
}
}
TeraPad（フリーソフト）など使って上記をコピペし、保存する時ファイルの種類を
「JavaScript」選択し、ファイル名を「gotop.js」にして保存するだけです。
それからリンク先「#header」は自分仕様に変更してください。
