一键回到顶部方法

最近看到有的网页可以通过点击一个元素回到顶部，想试着自己尝试一下如何实现

一先尝试一下如何按钮实现点击回到顶部

   1建立一个高1500的页面，在style中加入

        body{
            height: 1500px;
        }

 

 

    2建立按钮

<body>
 <button id="test" >回到顶部</button>
</body>

  3对按钮定位，加入style中，为了让页面下滑时依旧可以使用；这里使用固定定位，这里先把他定位在右下角

#test{
            position: fixed;
            right: 0px;
            bottom: 0px;
        }

4利用js实现回到顶部

    <script>
     test.onclick = function(){
         document.body.scrollTop = document.documentElement.scrollTop = 0;
         }
    </script>

　　这里说一下原理test.onclimk中的text表示使用test元素的内容，这里指的是这个按钮，test.onclimk中的onclimk表示该元素被点击作为触发条件；scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度；由于scrollTop是可写的，可以通过修改scrollTop实现点击后回到 顶部 或到达某个距离顶部多少像素的地方，比如scrollTop=100；表示距离顶部100px大的地方；可以利用scrollTop来实现回到顶部的功能

     特别注意：scrollTop=某个数即可；不用加单位；单位是像素加单位就会报错


二修改按钮大小

 这里修改大小为42*42，并移动一下位置，修改一下text即可

 #test{
            position: fixed;
            right: 57px;
            bottom: 50px;
            width: 42px;
            height: 42px;
        }

 

三给按钮设置背景图片(这里放一个向上的箭头）；并删除button中的文字；文字直接删除即可；并设置鼠标放上面时改变图片（这里放一个上面写有top的图片）

            background: url(//0.ss.faisys.com/image/backToTop/firstStyle/04.png?v=201505251717);
        #test:hover{
            background: url(//0.ss.faisys.com/image/backToTop/firstStyle/04_hover.png?v=201505251717);
        }

四消除不想要的影响；做完上面步骤后，会出现按钮外面有黑色边框，里面内容不居中，位置不对等不想要的情况，是因为页面有磨人的padding等元素，全部改为0即可

 

#test{
            position: fixed;
            right: 57px;
            bottom: 50px;
            width: 42px;
            height: 42px;
            background: url(//0.ss.faisys.com/image/backToTop/firstStyle/04.png?v=201505251717);
            margin:0;
            padding: 0;
            border: 0;
        }

五完成全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1500px;
        }
        #test{
            position: fixed;
            right: 57px;
            bottom: 50px;
            width: 42px;
            height: 42px;
            background: url(//0.ss.faisys.com/image/backToTop/firstStyle/04.png?v=201505251717);
            margin:0;
            padding: 0;
            border: 0;
        }
        #test:hover{
            background: url(//0.ss.faisys.com/image/backToTop/firstStyle/04_hover.png?v=201505251717);
        }
    </style>
</head>
<body>
 <button id="test" ></button>
    <script>
     test.onclick = function(){
         document.body.scrollTop = document.documentElement.scrollTop = 0;
         }
    </script>
 </body>
</html>

　　

 

 

posted @ 2021-11-14 10:39  蘑菇萌萌哒  阅读(628)  评论(0)    收藏  举报