使用JavaScript实现返回顶部的功能

最新推荐文章于 2021-06-08 21:54:46 发布

代码编编◐

最新推荐文章于 2021-06-08 21:54:46 发布

阅读量115

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117391841

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-返回顶部</title>
    <script src="../JS/jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
        }
        #box{
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 5px;
            text-align: center;
            background: #999;
            color: #fff;
            font-size: 14px;
            padding: 0 5px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">返回顶部</div>

    <script>
        // 给盒子添加一个点击事件
        $("#box").click(function(){
            $("body, html").animate({
                // 让滚动条返回页面的顶部
                scrollTop:0
            }, 500);
        });
        
        // 给页面设置一个方法，判断滚动条是否下拉了
        $(window).scroll(function(){
            // 获取这个页面的滚动条高度
            var hegin=$(window).scrollTop();
            if(hegin>1){
                $("#box").show();
            }else{
                $("#box").hide();
            }
        });
    </script>
</body>
</html>

效果图：
在这里插入图片描述

代码编编◐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用JavaScript实现返回顶部的功能

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>12-返回顶部</title> <script src="../JS/jquery-3.3.1.
复制链接

扫一扫