jQuery：返回顶部

最新推荐文章于 2022-03-07 09:57:01 发布

Zayn17

最新推荐文章于 2022-03-07 09:57:01 发布

阅读量104

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43867927/article/details/102394679

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过jQuery的scrollTop，来达到返回顶部的效果
步骤：

根据界面滑动来判断是否要出现"向上"按钮。
点击“向上”按钮，返回顶部，同时设置window的scrollTop值。（避免人家没完全上去）

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #up{
            font-size: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
            cursor:pointer;
        }
    </style>
</head>
<body style="height: 2000px">
<span id="up">☝</span>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    // 当屏幕上滑800px时，向上按钮出现，否则不出现
    $(function () {
        $(window).scroll(function () {
            if($(window).scrollTop() >= 800){
                $("#up").stop().fadeIn(500);
            }else{
                $("#up").stop().fadeOut(500);
            }
        });
        // 向上按钮绑定方法，点击后，返回顶部
        $("#up").on("click",function () {
            $("html,body").stop().animate({scrollTop:0}, 1000);
            // 将window的scrollTop置0
            $(window).scrollTop(0);
        });
    })
</script>
</html>

效果图（如果没有指头，可以用其他替代）
在这里插入图片描述

Zayn17

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery：返回顶部

通过jQuery的scrollTop，来达到返回顶部的效果步骤：根据界面滑动来判断是否要出现"向上"按钮。点击“向上”按钮，返回顶部，同时设置window的scrollTop值。（避免人家没完全上去）测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
复制链接

扫一扫