回顶部总结一

最新推荐文章于 2023-11-12 19:12:34 发布

张张张96

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量244

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Girl_0919/article/details/73611125

版权

Javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

方法一锚链接

<!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>

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回顶部总结一

方法一锚链接<!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: f
复制链接

扫一扫