【脱・jQuery】JavaScriptでシンプル上に戻るボタン(スクロールするとふわっと出てくる仕様)

シンプルな上に戻るボタンのメモ。
スクロールするとふわっと表示される仕様。
サンプルは「↑」のテキストを入れているけど、画像やfontawesome、CSSで作った図形など好きに変更できる。
hoverするとちょっとだけ上に動くようにした。

1 スクロールで表示される上に戻るボタン
2 参考サイト

スクロールで表示される上に戻るボタン

サンプルはこちら

HTML

<div id="to-top" class="to-top">↑</div>

CSS

#to-top {
  opacity: 0;
}
#to-top.is-show {
  position: fixed;
  color: #333;
  font-size: 50px;
  opacity: 0.6;
  transition: opacity 2s;
  cursor: pointer;
  bottom: 15px;
  right: 15px;
}
#to-top:hover {
  transition: .5s;
  bottom: 25px;
}

JavaScript

function toTopBtn() {
 return ( window.pageYOffset !== undefined ) ? window.pageYOffset: document.documentElement.scrollTop;
}

//トップに戻るボタンの要素を取得
var topButton = document.getElementById( 'to-top' );

//ボタンの表示・非表示
window.onscroll = function() {
  ( toTopBtn() > 500 ) ? topButton.classList.add( 'is-show' ): topButton.classList.remove( 'is-show' );
};

//トップに移動する関数
function scrollToTop() {
  var scrolled = toTopBtn();
  window.scrollTo( 0, Math.floor( scrolled / 2 ) );
  if ( scrolled > 0 ) {
    window.setTimeout( scrollToTop, 30 );
  }
};

//イベント登録
topButton.onclick = function() {
  scrollToTop();
};