【HTML】（Javascript）ページトップに戻るボタンの実装

ページトップに戻るボタンの実装

ページトップに戻るボタンを実装するコードをご紹介します。



▽css
<style>
page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #313131;
  opacity: 0.6;
  border-radius: 50%;
  }
page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
page_top a::before{
  font-family: FontAwesome;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
</style>

▽HTML内
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<div id="page_top"><a></a></div>

▽javascript
<script>
var pagetop = document.getElementById('page_top');
window.onload = function(){

    pagetop.style.visibility = 'hidden';

    // 表示・非表示設定
    window.onscroll = function(){
        var winSc = document.body.scrollTop || document.documentElement.scrollTop;
        if(winSc > 100){
            pagetop.style.visibility = 'visible';
        } else {
            pagetop.style.visibility = 'hidden';
        }
    }
}
pagetop.onclick = scrollToTop;
//スクロール量を取得
function getScrolled() {
    var position = document.body.scrollTop || document.documentElement.scrollTop;
    return position;
}
//トップに移動（スクロール）
function scrollToTop() {

    var scrolled = getScrolled();
    window.scrollTo( 0, Math.floor( scrolled * 0.7 ) );
    if ( scrolled > 1 ) {
        window.setTimeout( 'scrollToTop()', 30 );
    }
}
</script>

コードの解説

ページトップに戻るボタン自体は、CSSで作っています。
「FontAwesome」を使用していますので、URLリンクを忘れずに記載します。

また、このボタンはページのスクロール量（位置）に応じて表示されたり、非表示になったりと変化をつけています。
ページトップが表示されている場合はボタンは非表示になります。
ページ下部にスクロールすると表示されるようになります。

そして、実際にボタンをクリックされたときの動作は「scrollToTop()」で実装しています。
「window.scrollTo()」を用いると、ページ内の指定の座標を表示することができます。
これを応用してページトップに戻るまでに一定の割合でページ上部に戻るように動作するようにしていますので、なめらかにスクロールすることができます。
また、引数の係数を変更するとスピードを変えることができます。

以上、「（Javascript）ページトップに戻るボタンの実装」でした。