点击按钮返回页面顶部，jQuery轻松实现

最新推荐文章于 2023-06-13 10:37:33 发布

前端小白匠

最新推荐文章于 2023-06-13 10:37:33 发布

阅读量947

点赞数 1

文章标签： js jquery

本文链接：https://blog.csdn.net/qq_42805569/article/details/110354679

版权

本文介绍了如何使用jQuery实现网页滚动到一定位置后显示‘返回顶部’图标的效果。通过监测滚动条位置，当超过指定高度时显示图标，点击图标则平滑滚动到页面顶部。核心涉及的方法是jQuery的scrollTop()，并结合fadeIn()和fadeOut()实现动画效果。

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

在许多网站我们都会见到，当页面滚动到一定位置的时候，为了更好的用户体验，都会在下面出现一个‘返回顶部’的图标，用户点击该图标，会回到页面顶部。

这个效果其实并没有想象中那么复杂，需要了解scrollTop()这个API ，这个是jQuery中的方法，该方法返回或设置匹配元素的滚动条的垂直位置，当在页面顶部时，位置是0。

所以通过$(window).scrollTop()就可以拿到滚动条的实时位置，只要判断这个值超过一定高度，就执行我们的显示“返回顶部”图标的代码，点击图标，再执行将滚动条高度变为0，然后加上动画效果即可实现。

实现步骤：

引入jquery.js
创建一个div的盒子，设置背景宽高，固定定位，背景填充图片，以及初始display值为none，不显示
拿到滚动条的位置，判断是否超过指定高度，当超过的时候，让盒子显示，否则盒子隐藏
点击盒子，滚动到页面最顶部，也就是滚动条的垂直高度为0

完整代码如下：

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

<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
    body {
        height: 4000px;
    }
    .goTop {
        position: fixed;
        bottom: 50px;
        right: 0px;
        width: 80px;
        height: 50px;
        display: none;
        z-index: 100;
        background: url(images/gotop.jpg) no-repeat;
        background-size: contain;
    }
    </style>
</head>

<body>
    <div class="goTop"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var $goTop = $(".goTop");
        $(window).scroll(function() {
            var high = $(window).scrollTop();
            // 三元表达式进行高度判断
            high >=2000 ? $goTop.fadeIn() : $goTop.fadeOut
            
        })
          // 给html做动画，修改html的scrollTop
          // 写上html，body 是为了更好的兼容更多的浏览器 
          $("html, body").animate({
            scrollTop: 0
          });
        })

    });
    </script>
</body>

</html>

前端小白匠

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点击按钮返回页面顶部，jQuery轻松实现

本篇案例实现效果：当滚动条滚动到一定高度的时候，逐渐显示“返回顶部”图标，点击该图标，动画效果，缓慢滚动到页面顶部。实现原理： jquery 1.scrollTop() ，该方法返回或设置匹配元素的滚动条的垂直位置。 2.fadeIn() 、fadeOut() 动画效果 3.animate（）：自定义动画实现步骤：创建一个div的盒子，设置背景宽高，固定定位，背景填充图片，以及初始display值...
复制链接

扫一扫