回到上方的五种方式 一、锚点跳转

  说明:为a标签的href属性可以链接id属性实现页内跳转,为上方元素设置一个id属性即可。

  代码如下:

  

            这是顶部
    
     回到顶部
    
        这是页脚
    

  二、element.scrollTop

  说明:element.scrollTop返回当前视图中的实际元素上方边沿与底部边沿的距离,即当前显示element被浏览器堵住部份的高度typecho回到顶部,设置为0就可以回到底部。

  代码如下:

  

       这是顶部
    
     回到顶部
    
       这是页脚
    
    
       document.getElementsByClassName('btn')[0].onclick = function () {
           document.body.scrollTop = document.documentElement.scrollTop = 0;
       }
    

  三、window.scrollTo

  说明:把内容滚至指定座标,参数x(必须),指定的x座标,参数与y(必须),指定的y座标,设置window.scrollTo(0,0)可以回到底部。

  代码如下:

  

        这是顶部
    
     回到顶部
    
        这是页脚
    
    
        document.getElementsByClassName('btn')[0].onclick = function () {
            // document.body.scrollTop = document.documentElement.scrollTop = 0;
            window.scrollTo(0,0)
        }
      

  四、window.scrollBy()

  说明:可把内容滚动指定的像素数;参数,xnum(必选),把文档往右滚动的像素数,ynum(必选),把文档向上滚动的像素数。只需把ynum设为正数,即可回到底部。

  代码如下:

  

    这是顶部
    
     回到顶部
    
        这是页脚
    
    
     document.getElementsByClassName('btn')[0].onclick = function () {
         // document.body.scrollTop = document.documentElement.scrollTop = 0;
         // window.scrollTo(0,0)
         var top = document.body.scrollTop || document.documentElement.scrollTop
         window.scrollBy(0,-top)
     }
     

  五、element.scrollIntoView()

  说明:让当前的元素滚动至浏览器窗口的可视区域内。参数,Boolean(可选,默认为true)typecho回到顶部,为true时,元素的顶部将跟其所在滚动县的可视区域的顶部对齐;为false时,元素的底端将跟其所在滚动县的可视区域的底端对齐。

  代码如下:

  

        这是顶部
    
     回到顶部
    
        这是页脚
    
    
        document.getElementsByClassName('btn')[0].onclick = function () {
            // document.body.scrollTop = document.documentElement.scrollTop = 0;
            // window.scrollTo(0,0)
            // var top = document.body.scrollTop || document.documentElement.scrollTop
            // window.scrollBy(0,-top)
            document.getElementById('header').scrollIntoView()
        }
        
最后修改:2020 年 12 月 22 日 01 : 18 AM
如果觉得我的文章对你有用,请随意赞赏