スクロールしながらページトップに戻るボタン

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」は自分仕様に変更してください。