jQuery带有动画的返回顶部

最新推荐文章于 2023-09-11 09:48:29 发布

龙眸

最新推荐文章于 2023-09-11 09:48:29 发布

阅读量235

点赞数 1

分类专栏：笔记文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/weixin_52065872/article/details/124692788

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

该案例展示了如何使用JavaScript和jQuery实现网页滚动时显示和隐藏返回顶部按钮的效果，并在点击按钮时平滑滚动到页面顶部。核心代码利用$(document).scrollTop()判断滚动位置，以及$('body,html').stop().animate()进行动画滚动。

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

案例分析

各方面分析

案例实现代码

核心区域

$(function() {
            // 返回指定的位置
            $(document).scrollTop(100);
            // 被卷去的头部scrollTop 被卷去的左侧 scrollLeft()
            // 获取到文档顶部的距离
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body,html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画

            });
        })

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            // 返回指定的位置
            $(document).scrollTop(100);
            // 被卷去的头部scrollTop 被卷去的左侧 scrollLeft()
            // 获取到文档顶部的距离
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body,html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画

            })
        })
    </script>
</body>

</html>

龙眸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery带有动画的返回顶部

案例分析案例实现代码核心区域$(function() { // 返回指定的位置 $(document).scrollTop(100); // 被卷去的头部scrollTop 被卷去的左侧 scrollLeft() // 获取到文档顶部的距离 var boxTop = $(".container").offset().top; $(window).scroll
复制链接

扫一扫

专栏目录