はじめに

色々な記事を読んでいると、そもそも戻るボタンをつける必要はあるのか?という疑問が湧いていきます。 確かにスクロールやブラウザの機能、そしてPCの場合にはキーボードのショートカットを使用すれば簡単にページトップへは戻れますが、 そのような機能を知らないユーザーやあまりにも長いページの場合には視覚的に戻るボタンがあると安心するような気がします(昔の自分がそうだったので)。 ということで、タイトルにもあるように今回はjQueryを使わずに素のJavaScriptだけでページトップへ戻るボタンを実装していきます。

DEMO

まずはどのような動きになるかデモをご覧ください。 DEMO

実装していく

▼HTML
<div id="js-scroll-fadein" class="js-scroll-fadein arrow"></div>
▼SCSS
/*--------------------------------
  scroll animation fadein
--------------------------------*/
.js-scroll-fadein {
  transition: opacity 1s;
  visibility: hidden;
  opacity: 0;
  &.is-fadein {
    visibility: visible;
    opacity: 1;
  }
}
/*--------------------------------
  arrow
--------------------------------*/
.arrow{
  position: fixed;
  right: 12px;
  bottom: 12px;
  color: #fff;
  cursor: pointer;
  background-color: #c4c4c4;
  border-radius: 22px;
  padding: 20px;
  transition: all 0.2s ease-in-out;
  &:hover{
    opacity: .8;
    bottom: 15px;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.5);
  }
  &:before,&:after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    transform: rotate(-45deg);
    position:  absolute;
    left: 14px;
  }
  &:before {
    top: 11px;
  }
  &:after {
    top: 21px;
  }
}
▼JavaScript
//スクロール量を取得する関数
function getScrolled() {
  return ( window.pageYOffset !== undefined ) ? window.pageYOffset: document.documentElement.scrollTop;
}
        
//トップに戻るボタンの要素を取得
var topButton = document.getElementById( 'js-scroll-fadein' );
          
//ボタンの表示・非表示
window.onscroll = function() {
  ( getScrolled() > 500 ) ? topButton.classList.add( 'is-fadein' ): topButton.classList.remove( 'is-fadein' );
};
          
//トップに移動する関数
function scrollToTop() {
  var scrolled = getScrolled();
  window.scrollTo( 0, Math.floor( scrolled / 2 ) );
  if ( scrolled > 0 ) {
    window.setTimeout( scrollToTop, 30 );
  }
};
          
//イベント登録
topButton.onclick = function() {
  scrollToTop();
};

さいごに

HTML,CSS,JavaScript全てにおいて他の書き方もあるので調べてみるといいと思います。 また、画面の表示速度を速くしたいので今回は素のJavaScriptで書きましたが、jQyeryを使うメリットもあるので 案件ごとに柔軟に対応していければいいかなと思っています。

参考ページ

https://www.tomotanuki.com/entry/web-top-of-page