网页返回顶部功能实现

最新推荐文章于 2024-09-08 16:45:30 发布

云隐雾匿

最新推荐文章于 2024-09-08 16:45:30 发布

阅读量1.3k

点赞数 4

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_45684362/article/details/124530802

版权

jQuery 返回顶部滚动事件平滑滚动网页交互

关键词由CSDN通过智能技术生成

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、效果图：

二、准备工作：

jquery-3.6.0.min.js下载（链接如下）

Download jQuery | jQuery

如图，右键选择Download the compressed....，点击将链接另存为：

保存在你想要的路径下：

三、代码：

强调一点：

（这种写法是为了帮助纯小白同学，有一定基础的朋友可直接换为相对路径）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <!-- src处填写你刚下载好了的jquery-3.6.0.min.js文件路径 -->
    <script type="text/javascript" src="file:\\\你的jquery-3.6.0.min.js存放地址\jquery-3.6.0.min.js"></script>
    <style>
        #box {
            position: fixed;
            bottom:30px;
            right: 30px;
        }
        #back_to_top{
            border:1px solid #888;
        }
        .text{
            height: 3000px;
            width: 200px;
        }
    </style>
</head>
<body>
<!-- 此处可将button换做好看的图标，但id需保持一致 -->
<div id="box" title="我是按钮"><button id="back_to_top">返回顶部</button></div>

<!-- 此处用于填充页面，以展示效果 -->
<div class="text"></div>

<script type="text/javascript">
    var backButton=$('#back_to_top');
    function backToTop() {
        $('html,body').animate({
            scrollTop: 0
        }, 500);  //这里的500用于调整滚动条回滚速度 ，例如还可改为：1000,700等
    }

    backButton.on('click', backToTop);

 
    $(window).on('scroll', function () {
        if ($(window).scrollTop() > ($(window).height()))
            backButton.fadeIn();
        else
            backButton.fadeOut();
    });

    $(window).trigger('scroll');
</script>
</body>
</html>

好了，大功告成！最后可将相应代码移植到项目中为网页添加上这个功能。