今天看了《JavaScript编程精解》的 滚动事件后,想用JS实现点击按钮返回到页面顶部,下面是具体的代码:
<style>
.btn {
width: 50px;
height: 50px;
position: fixed;
top: 10px;
right: 10px;
background: blue;
}
body {
height: 2000px;
}
</style>
<button id="return_top" class="btn">返回页面顶部</button>
<script>
function pageScroll() {
window.scrollBy(0,-100);
var scrolldelay = setTimeout('pageScroll()',100);
if (pageYOffset === 0) {
clearTimeout(scrolldelay);
}
}
var btn = document.getElementById("btn");
btn.onclick = pageScroll;
</script>
scrollBy(xnum, ynum) 方法可把内容滚动指定的像素数;
pageYOffset为当前滚动位置,当滚动位置到达顶部便取消定时任务