w3h5

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

2017-05-31-16-29-08.png 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>


赞 (0)
分享到: +More |

评论 沙发

换个身份