说在前面:
在日常工作中难免会遇到一些滚动事件的应用,页面滚动到一定位置显示
返回顶部
按钮,
header
头部
fixed
固定等,这时候就可以使用
scroll()
方法来实现我们的需求。
定义和用法
当用户滚动指定的元素时,会发生
scroll
事件。该事件适用于所有可滚动的元素和
window
对象(浏览器窗口)。
scroll()
方法触发
scroll
事件,或规定当发生
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);