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

最新推荐文章于 2022-10-17 11:28:50 发布

diebaiying3731

最新推荐文章于 2022-10-17 11:28:50 发布

阅读量554

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghuali/p/6667631.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>

　　如图：

转载于:https://www.cnblogs.com/huanghuali/p/6667631.html

diebaiying3731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll滚动到一定距离触发事件/返回顶部animate

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; pa...
复制链接

扫一扫