javascript实现网页返回顶部功能

时间：2021-07-03 14:54:30

在浏览网页时，我们一般是拖动滚动条向下滑动，浏览下面的内容，当页面超过单页时，右下角会出现一个回到顶部的图标，有些网站这个图标一直显示在右下角的。

有些网站使用锚链接来实现页面内容的跳转，但这种效果的用户体验比较差，因为是突然跳转，眼睛来不及反应。

这里我们使用js实现页面返回顶部。为了使滚动条渐进地上移，我们需要使用定时器。同时通过不断改变滚动条顶部的高度来控制页面的变化。

下面为具体代码实现

index.html:

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div class="box">
        <img src="tb_bg.jpg"/>
    </div>
    <a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>

style.css:

.box {
    width:1190px;
    /*图片居中*/
    magin:0 auto;
}

#btn {
    width:40px;
    height:40px;
    /*设置固定位置*/
    position:fixed;
    left:50%;
    margin-left:610px;
    bottom:30px;
    background:url(top_bg.png) no-repeat left top;
}

/*鼠标浮动切换图片效果*/
#btn:hover {
    background:url(top_bg.png) no-repeat 0 -40px;
}

script.js:

/**
 * Created by lujie on 2016/11/15.
 */

//页面加载完毕后触发
window.onload = function () {
    var obtn = document.getElementById('btn');
    var timer = null;
    var isTop = true;

    //滚动条滚动时触发
    window.onscroll = function () {
        if(!isTop){
            clearInterval(timer);
        }
        isTop = false;
    }
    obtn.onclick = function () {
        //设置定时器
        timer = setInterval(function () {
            //滚动条距离顶部的高度
            var osTop = document.documentElement.scrollTop||document.body.scrollTop;
            var isSpeed = Math.ceil(osTop/6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop-isSpeed;

            isTop = true;
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

注：IE浏览器滚动条顶部的高度：document.documentElement.scrollTop

谷歌浏览器滚动条顶部的高度：document.body.scrollTop

标签：

相关文章