jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

说在前面：

在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示 返回顶部 按钮，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>

未经允许不得转载：前端资源网 - w3h5 » jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部