Web中的回到顶部

今天练习的是网页中回到顶部的小功能。我们在平时浏览网站的时候，当页面内容很多的时候，浏览器显示区域只能显示网页的部分内容，当浏览到网页底部或者中间的时候，旁边就会有一个回到顶部的按键。现在我就来实现这个功能。

首先，准备3个文件夹：images js style 。我用浏览器截取一张长Web，保存到 images 文件夹中。我截取整个网页的工具是chrome拓展插件——网页截图:注释&批注。然后我们在制作一个关于回到顶部的图片（40*80），也保存到 images 文件夹中。

然后我们就开始来实现这个功能：

在<body></body>部分写入：

<div class=”Box”><img scr=”images/web.png></div> /**这里引入之前截取的web网页的图片**/

在<head></head>里引入样式表，并为其添加内容：

.Box{

width:1100Px;

margin: 0 left ;

overflow: hidden;

} /**为引入的web图片设置居中、宽为1100Px，超出部分隐藏**/

接着就添加我们的回到顶部的代码：

在div（id=“Box”)后面添加标签<a>：

为其定义样式：

#btn{
width: 40px;

height: 40px;

left: 50%;

buttom: 30px;

position: fixed;

margin-left: 600px;

background: url(../images/top_bg.png) no-repeat left top;

display: none;

} /**设置居中的位置，并右移600px**/

#btn:hover{background:url(../images/top_bg.png) no-repeat left –40px;}

/**显示图片的下半部分，左边位置不变，距离顶部40px，此处表示出来要用负号，所以是-40px**/

再然后就是javascript部分：

引入javascript的代码，并为其添加代码：

windows.onload = funciton(){

var obtn = document.getElementById(“btn”);

obtn.onclick = function(){

document.documentElement.scrollTop = document.body.scrollTop –= 200;

}

调试的时候会发现，返回顶部太快了，用户体验很不好，这里需要有一个返回的过程，所以我们更新Javascript的代码：

//页面加载后触发
window.onload =function() {
    var obtn = document.getElementById("btn");
    //获取可视区的高度
    var clientHeighet = document.documentElement.clientHeight;
    var time = null;
    var isTop = true;
    //滚动条滚动时触发
    window.onscroll = function () {
        var disTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (disTop >= clientHeighet) {
            obtn.style.display = "block";
        } else {
            obtn.style.display = "none";
        }
        if (!isTop) {
            clearInterval(time);
        }
        isTop = false;
    }
    obtn.onclick = function () {
        //设置定时器
        time = setInterval(function () {
            //获取滚动条距离滚动条顶部的高度
            var disTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-disTop / 5);
            document.documentElement.scrollTop = document.body.scrollTop = disTop + ispeed;
            isTop = true;
            if (disTop == 0) {
                clearInterval(time);
            }
        }, 30);
    }
}

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <style>
        .box{
            width: 1100px;
            overflow: hidden;
            margin: 0px auto;
        }
        #btn{
            width: 40px;
            height: 40px;
            position: fixed;
            left: 50%;
            bottom: 30px;
            margin-left: 590px;
            background: url("images/top_bg.png") no-repeat left top;
            display: none;
        }
        #btn:hover{background: url("images/top_bg.png") no-repeat left -40px }
    </style>
    <script>
        //页面加载后触发
        window.onload =function() {
            var obtn = document.getElementById("btn");
            //获取可视区的高度
            var clientHeighet = document.documentElement.clientHeight;
            var time = null;
            var isTop = true;
            //滚动条滚动时触发
            window.onscroll = function () {
                var disTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (disTop >= clientHeighet) {
                    obtn.style.display = "block";
                } else {
                    obtn.style.display = "none";
                }
                if (!isTop) {
                    clearInterval(time);
                }
                isTop = false;
            }
            obtn.onclick = function () {
                //设置定时器
                time = setInterval(function () {
                    //获取滚动条距离滚动条顶部的高度
                    var disTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var ispeed = Math.floor(-disTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = disTop + ispeed;
                    isTop = true;
                    if (disTop == 0) {
                        clearInterval(time);
                    }
                }, 30);
            }
        }
    </script>
</head>
<body>
<div class="box">
<img src="images/web.png" />
</div>
 <a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>

由于快熄灯的原因，后面写得很粗糙，请谅解。这是是相关知识的原作者的视频链接，点击查看

posted @ 2015-04-19 22:38 留在世间光年阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

秋月白

Web中的回到顶部

公告