回到顶部按钮功能实现

最新推荐文章于 2024-05-14 10:30:09 发布

zzのpara

最新推荐文章于 2024-05-14 10:30:09 发布

阅读量244

点赞数

分类专栏： vue项目文章标签：前端 javascript html

本文链接：https://blog.csdn.net/paradoxzl/article/details/125777077

版权

vue项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用jQuery创建一个回到顶部的按钮。当页面滚动到一定距离时，按钮会显示，点击则平滑滚动至页面顶部。代码示例包括CSS样式和JavaScript函数，展示了如何监听滚动事件以及实现点击事件的回调功能。

摘要由CSDN通过智能技术生成

<button onclick="topFunction()" id="to_top"></button>

#to_top {
    background-image: url(../img/Top.png);
    width: 50px;
    height: 50px;
    background-color: gainsboro;
    position: fixed;
    margin-left: 1450px;
    bottom: 50px;
    color: white;
    z-index: 10;
    display: none;
    border: none;
    outline:none;
    cursor: pointer;
 }

//当页面向下滑动出现“Top”按钮
        window.onscroll = function () { scrollFunction() }

        function scrollFunction() {
            if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 780) {
                document.getElementById("to_top").style.display = "block";
            } else {
                document.getElementById("to_top").style.display = "none";
            }

        }
        //点击按钮，返回顶部
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

使用jQuery实现回到顶部按钮功能，距离顶部一定距离时出现，点击后，回到顶部