プレーンJavaScriptでページトップとアンカーリンク

今更だけど作る機会があったので保存。
プレーンでも offsetTop が使えることは知らなかった。

デモを見る

<footer id="footer">
footer
</footer>
<div id="page-top">ページ上部へ</div>
<div id="page-bottom">フッターへ</div>
<script src="js/top_bottom.js"></script>

footer

</footer>

<div id="page-top">ページ上部へ</div>

<div id="page-bottom">フッターへ</div>

/*
to top and anchor
Author: KEITA HIRAI
URL: keitahirai.net
*/
var pageT = document.getElementById("page-top"),
	pageB = document.getElementById("page-bottom"),
	footerTop = document.getElementById("footer");

if (pageT != null) {
	pageT.addEventListener("click", function(e) {
		window.scrollTo(0, 0);
		e.stopPropagation();
	})
}

if (pageB != null) {
	pageB.addEventListener("click", function(e) {
		y = footerTop.offsetTop;
		window.scrollTo(0, y);
		e.stopPropagation();
	})
}

to top and anchor

Author: KEITA HIRAI

URL: keitahirai.net

var pageT = document.getElementById("page-top"),

pageB = document.getElementById("page-bottom"),

footerTop = document.getElementById("footer");

if (pageT != null) {

pageT.addEventListener("click", function(e) {

window.scrollTo(0, 0);

e.stopPropagation();

})

}

if (pageB != null) {

pageB.addEventListener("click", function(e) {

y = footerTop.offsetTop;

window.scrollTo(0, y);

e.stopPropagation();

})

}

鼻ちょうちん

プレーンJavaScriptでページトップとアンカーリンク

コメントを投稿する返信をキャンセル

プレーンJavaScriptでページトップとアンカーリンク

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル