jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部
jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部
德顺
发布于 2019-11-12 17:01:00
发布于 2019-11-12 17:01:00
说在前面：
在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示 返回顶部 按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。
定义和用法
当用户滚动指定的元素时，会发生 scroll 事件。该事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
语法：
$(selector).scroll()应用：
我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。
HTML部分：
<span href="" class="goTop">返回顶部</span>CSS部分：
body{
height: 2000px;
}
.goTop{
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}JS部分：
<script>
$(function() {
$(window).scroll(function() {
var scroHei = $(window).scrollTop();//滚动的高度
if (scroHei > 400) {
$('.goTop').fadeIn();
} else {
$('.goTop').fadeOut();
}
})
/*点击返回顶部*/
$('.goTop').click(function() {
$('body,html').animate({
scrollTop: 0
}, 300);
})
})
</script>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录