バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法

ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複数のページに設置する必要があり、ページによってはjQueryを使用していないところがあるのでバニラJavaScriptのみで対応したい。以下にソースコードをメモ。

ソースコード

<a href="#top" id="backtop" style="bottom: 20px;display: none;position: fixed;right: 20px;z-index: 9999; padding: 10px; background: #262626; color:#fff;">TOPへ</a>
<script>
if (document.addEventListener) {
    window.addEventListener("scroll", scrollToggle, false);
} else {
    window.attachEvent("onscroll", scrollToggle);
}
function scrollToggle(e){
    var scl = document.documentElement.scrollTop || document.body.scrollTop;
    document.getElementById("backtop").style.display = scl > 300 ? 'block' : 'none'; //ここでスクロール量を変えられる。
}
</script>

その他

トップに戻るボタンはインラインのCSSで多少見た目を整えているが画像に変更する等、適宜調整すること。