JavaScriptだけでTOPへ戻るリンクの表示
2014/07/04
ページ内をある程度スクロールするとTOPへ戻るリンクを
表示させたかった。
ただ、複数のページに設置する必要があり、
ページによってはjQueryを使用していないところがあるので、
JavaScriptのみで行いたい。
と思って探したらよさげなソースがあったのでメモ。
<!--TOPへ戻る-->
<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>
<!--TOPへ戻る-->
関連記事
-
JavaScriptで文字列から数値(特に小数)へ変換時の注意点
JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...