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

您所在的位置：网站首页 › jquery控制元素的滚动条的位置 › jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

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

2024-04-10 19:26| 来源: 网络整理| 查看: 265

说在前面：

在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。

定义和用法

当用户滚动指定的元素时，会发生 scroll 事件。该事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

语法： $(selector).scroll()应用：

我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。

HTML部分：

返回顶部

CSS部分：

body{ height: 2000px; } .goTop{ position: fixed; right: 50px; bottom: 100px; display: none; }

JS部分：

$(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); }) })

(adsbygoogle = window.adsbygoogle || []).push({});

【本文地址】

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

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

今日新闻

推荐新闻