回到顶部demo

东泽o.0

于 2020-04-22 15:25:44 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/qwe19991123/article/details/105683081

版权

<!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>回到顶部demo</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="header">我在顶部</div>
    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->
    <img class="footer" id="gotoTop" src="img\timg.jpg" alt="">
 
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script src="./js/script.js"></script>
</html>


```javascript
*{
    padding: 0;
    margin: 0;
}

.header {
    color: rgb(243, 152, 6);
    width: 100%;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
}
.footer {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 54px;
    height: 54px;
}

function gotoTop(minHeight){
 
    // 定义点击返回顶部图标后向上滚动的动画
    $("#gotoTop").click(
        function(){$('html,body').animate({scrollTop:'0px'},'slow');
    })

    // 获取页面的最小高度，无传入值则默认为600像素
    minHeight? minHeight = minHeight:minHeight = 600;

    // 为窗口的scroll事件绑定处理函数
    $(window).scroll(function(){

        // 获取窗口的滚动条的垂直滚动距离
        var s = $(window).scrollTop();

        // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
        if( s > minHeight){
            $("#gotoTop").fadeIn(500);
        }else{
            $("#gotoTop").fadeOut(500);
        };
    });
};
gotoTop();

东泽o.0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回到顶部demo

<!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-U...
复制链接

扫一扫