手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 编程 > web开发 >

JS返回页面顶部

2017-03-23 09:53|来源:未知 |作者:dnzg |点击:

JS返回页面顶部,今天看了《JavaScript编程精解》的 滚动事件后,想用JS实现点击按钮返回到页面顶部,下面是具体的代码:
 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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为当前滚动位置,当滚动位置到达顶部便取消定时任务

(责任编辑:dnzg)