美文网首页
关于网站回到顶部的实现

关于网站回到顶部的实现

作者: 高家小威 | 来源:发表于2017-07-16 18:34 被阅读0次

    在我们浏览网页的时候,当页面下拉到一个可视窗口以下时,大多数网站会在页面右侧边栏出现一个“回到顶部”的小按钮,以方便我们回到本页面最顶端,避免繁琐的滚动鼠标滚轮或者滚动条。

    那这种回到顶部的效果是怎么实现的?

    1.无滚动效果,也就是直接到顶部,视觉效果差,但是快速,点一下就立马回到顶部。例如:京东

    2.有滚动效果,用户体验好,这也是目前多数网站采用的滚动回顶的方式。例如:淘宝为例:
    下面重点讲一下第二种,敲黑板!!!

    这个效果剖析原理无非是定时:setinterval

    下面我们来实现一下。
    先布局,将置顶的小块固定在某个位置
    点击小div,实现滚动回到顶部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>回到顶部</title>
        <style>
            div {
                width: 30px;
                height: 30px;
                background: rgba(0,0,0,0.3);
                color: #fff;
                text-align: center;
                line-height: 30px;
                position: fixed;
                right:0;
                top:500px;
            }
        </style>
        <script>
            window.onload = function () {
                var oDiv = document.querySelector('div');
                window.onscroll = function () {
                    var iScroll = document.documentElement.scrollTop || document.body.scrollTop;
                    oDiv.onclick = function () {
                        var start=iScroll;                  //开始的滚动距离
                        var end =0;                         //结束的滚动距离
                        var total=end-start;                //移动的距离差
                        var time=500;                      //移动的总时长
                        var count= Math.ceil(time / 30);   //定时器走500毫秒需要走几步的总步数
                        var n=0;                            //初始化n.开启定时器后让 n++
                        var timer = null;                   //定义定时器
                        timer=setInterval(function () {
                            n++;
                            if(n==count){
                                clearInterval(timer);
                            }
                            console.log(count)
                            if(document.documentElement.scrollTop){
                                document.documentElement.scrollTop=start + n * total / count;
                                // total/count意思是每30秒,走一步移动的距离
                            }else{
                                document.body.scrollTop=start + n * total / count;
                            }
                        },30);
    
                    }
                }
            }
        </script>
    </head>
    <body style="height: 3000px;">
        <div>↑</div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:关于网站回到顶部的实现

          本文链接:https://www.haomeiwen.com/subject/mvqxkxtx.html