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>


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

推荐阅读:

阿里巴巴矢量图标库 iconfont 的使用方法

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

新网站如何做好SEO优化 尽快被收录

QQ聊天插件,鼠标划入划出显示隐藏效果。

WebStorm绑定Chrome浏览器实现实时自动刷新

赞 (3)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)