回顶部总结一

来源：互联网发布：程序员翻墙干什么编辑：程序博客网时间：2024/06/06 01:00

方法一锚链接

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="box" style="height:2000px;background:red;"></div><a href="#box" style="position: fixed;bottom:20px;right:20px;">回到顶部</a></body></html>

方法二 scrollTop

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="box" style="height:2000px;background:red;"></div><a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a></body><script>    function getscrolltop(){        var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;        return  scrolltop;    }    function toTop(){        var top=getscrolltop();        document.documentElement.scrollTop=document.body.scrollTop=0;    }</script></html>

第三种 scrollTo

    scrollTo() 方法可把内容滚动到指定的坐标。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="box" style="height:2000px;background:red;"></div><a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a></body><script>   function toTop(){        scrollTo(0,0);    }</script></html>

第四种 scrollBy

  scrollBy() 方法可把内容滚动指定的像素数。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="box" style="height:2000px;background:red;"></div><a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a></body><script>    function getscrolltop(){        var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;        return  scrolltop;    }    function toTop(){        var top=getscrolltop()        scrollBy(0,-top)    }</script></html>

第五种 scrollIntoView

  scrollIntoView() 滚动文档。使该元素出现在窗口的顶部或底部。

  该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><script>    function toTop(){        box.scrollIntoView();    }</script><div id="box" style="height:2000px;background:red;"></div><a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a></body></html>

阅读全文

0 0

回顶部总结一

方法一 锚链接

方法二 scrollTop

第三种 scrollTo

第四种 scrollBy

第五种 scrollIntoView

方法一锚链接