scroll滚动到一定距离触发事件/返回顶部animate

Posted 松哥1204

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scroll滚动到一定距离触发事件/返回顶部animate相关的知识,希望对你有一定的参考价值。

html代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        .box{ width: 960px; height: 1800px; background: #F29292; margin: 0 auto; }
        .gotop{ width: 60px; height: 60px; background: red; position: fixed; left: 50%; bottom: 50px; margin-left: 480px; display: none; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        //scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
        $(window).scroll(function() {
                var scroHei = $(window).scrollTop();//滚动的高度
                if (scroHei > 400) {
                    $(\'.J_goTop\').fadeIn();
                } else {
                    $(\'.J_goTop\').fadeOut();
                }
            })
            /*点击返回顶部*/
        $(\'.J_goTop\').click(function() {
            $(\'body,html\').animate({
                scrollTop: 0
            }, 600);
        })
    })
    </script>
</head>
 
<body>
<div class="box"></div>
<div class="gotop J_goTop">返回顶部</div>
</body>
 
</html>

  效果图

 

以上是关于scroll滚动到一定距离触发事件/返回顶部animate的主要内容,如果未能解决你的问题,请参考以下文章

JS - 滚动事件(onscroll)

关于屏幕滚动触发的一些事件

jQuery 滚动条高度触发事件

js如何监听屏幕滚动到底了

仿淘宝固定侧边栏

滚动到页面底部触发分页事件