jQuery使用scroolTop监听滚动条

最新推荐文章于 2022-11-06 08:13:21 发布

原创

最新推荐文章于 2022-11-06 08:13:21 发布 · 540 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #前端 #scroolTop

这篇博客记录了在实现返回顶部按钮时遇到的浏览器兼容性问题，特别是Chrome和Firefox、IE之间的差异。博主分享了一段代码，通过判断scrollTop确保在不同浏览器中都能正确工作，包括IE9及更早版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

早上跟一个视频做返回顶部的按钮的时候发现一个问题，就是视频里老是用chrome浏览器可以实现的效果，我用chrome居然不能实现，倒是edge浏览器可以实现，这就比较玄乎了，后来查了，他们确实还不太一样。

这里记一下，防止以后忘了再找，也给自己提个醒，多写半句也就好了。

直接上代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>滚动监听，入返回顶部，或者滚动中途的广告</title>
    <style>
        *{
    
    padding: 0;margin: 0

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery 滚动条事件简单实例及源代码

YabClass的博客

10-08

298

在本文中，我们将介绍一个简单的 jQuery 滚动条事件实例，并提供相应的源代码。这个实例将帮助你理解如何使用 jQuery 监听滚动条事件，并执行相应的操作。在这个示例中，我们简单地在控制台打印了一条消息，表示滚动条正在滚动。你可以根据自己的需求修改这部分代码，执行你想要的操作，例如更新页面元素、加载更多内容等等。你可以根据需要扩展这个示例，并在滚动条滚动时执行任何操作。在这个处理程序中，你可以根据需要添加自定义的操作。现在，当你在浏览器中滚动滚动条时，你应该能够在控制台中看到打印的消息。

jquery监听窗口滚动事件

weixin_48596030的博客

11-02

3039

jquery监听窗口滚动事件

参与评论您还未登录，请先登录后发表或查看评论

基于Bootstrap3的滚动监听（Scrollspy）jQuery插件

12-12

dynamic-scrollspy是一款基于Bootstrap3的滚动监听（Scrollspy）jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果，它会自动为你添加一个侧边栏导航，并设置好原生的Bootstrap滚动监听。

jqueryDIV滚动条

12-09

jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

jquery监听滚动条

weixin_30432579的博客

03-05

300

$(".lx").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$(this).get(0).scrollHeight,//内容高度 scrollTop =$(this).scrollTop()...

Jquery滚动条监听事件

weixin_30951743的博客

01-29

406

　　先来一个例子： $(document).ready(function(){//在文档加载完毕后执行 $(window).scroll(function(){//开始监听滚动条 //获取当前滚动条高度 var topp = $(document).scrollTop(); //用于调试弹出当前滚动条高度 ...

jQuery判断是否存在滚动条的简单方法

10-21

在jQuery中，可以使用`scrollTop()`方法来读取或设置被选元素的垂直滚动条的偏移量。如果页面元素具有滚动条，那么滚动条的偏移量将会大于0；反之，则为0。这个特性就是本文所描述方法的基础。具体实现如下： 1. ...

jquery.nicescroll完美滚动条使用方法

06-10

一款非常完美的滚动条，简称nicescroll自定义滚动条，兼容性良好，可以完美兼容IE 6 7 8 火狐谷歌等几乎目前都在用的浏览器，使用方法简单。只要依次引入jquery库以及jquery.nicescroll插件，然后将需要滚动部分...

jQuery实现判断滚动条滚动到document底部的方法分析

10-16

本文将详细解析如何使用jQuery来实现判断滚动条滚动到document（文档）底部的方法。这个功能通常用于动态加载数据，例如分页加载文章、图片或其他内容。首先，我们需要了解几个关键的概念： 1. **滚动条滚动高度*...

jquery监听滚动条，实现“返回顶部”

m0_72495985的博客

11-06

1325

我们在浏览网页时，网页内容过多会使得滚动条缩小并越来越靠近页面底部，当想返回到页面最顶端时靠滚动鼠标会很麻烦，因此在很多网页在靠近滚动条处都有一个“返回顶部”等内容的按钮，以快速的回到页面最顶端。

JQuery监听滚动条滚动事件

CaseyWei

08-29

1372

$(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 if(scroH >1080)...

jquery滚动监听插件waypoints

IT1125275074的博客

10-22

799

waypoints：用于捕获各种滚动事件的插件&&还支持固定元素和无限滚动的功能，功力十分强大。 Waypoints使用方法：step1：下载waypoints插件（importpath） <scriptsrc="jquery.min.js"></script> <scriptsrc="waypoints.min.js"&gt...

依赖于Jquery的滚动监听

谷小伟的博客

08-01

687

固定导航滚动监听，依赖于Jquery 之前一直用的是bootstrap的滚动监听，用的是a标签的锚链接，发现有些不太好的地方，并且最近有些小的网站并不想引入bootstrap一个这么大的插件，似乎对一些网站来说略显臃肿，不管怎么样吧，抽时间自己写了一版，希望可以帮到大家吼！先大概其来个效果图上代码我的代码总是全篇的哦，比较方便，但是希望大家也要认真缕清楚逻辑的哈 &...

jQuery检测滚动条(scroll)是否到达底部

Carl_Zhang

02-06

4533

一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scr

jquery 监听滚动条滚动加载

ZHAO Q.H.

09-25

415

高度 滚动条距离顶部的高度浏览器窗口的高度网页的实际高度参考滚动到某一位置加载新内容的高度 <script type="text/javascript"> var gPage = 1; var gRequestPageTimer = null; var gIsRequestPage = 1; $(function(){ $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度

html页面滚动条监听事件,jquery如何监听滚动条事件？

weixin_42468580的博客

06-03

2707

jquery如何监听滚动条事件？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。问题：在浏览很多网页中都会发现，当滚动条滚动到一定的位置的时候就出显示一个返回到顶部的小图标，那如何监听判断滚动条滚动到指定的位置后触发某个事件呢？方法：可以通过使用$(window).scroll()进行滚动条的监听当用户滚动指定的元素时，会发生 scroll 事件。scr...

Bootstrap页面滚动监听jQuery插件

ICode联盟

02-23

240

下载地址 Scrollspy是基于Bootstrap3的滚动监听jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果，它会自动为你添加一个侧边栏导航，并设置好原生的Bootstrap滚动监听。在原生的Bootstrap中就有滚动监听效果，但是它使用起来相对要复杂一些，你可以在这里找到原生Bootstrap滚动监听插件的使用方法。使用dynamic-scrollspy插件简化了这些操作，你可以通过简单的设置就生成一个非常好的页面滚动监听效果。 dd: ...

滚动监听导航 JQUERY 易懂

神夜空间

03-16

2219

非常易懂一看明白，留着

jquery如何使用滚动条监听事件

ol753的博客

03-08

1221

jquery使用滚动条监听事件的方法：1、使用【$(window).scrollTop():】获取垂直滚动条距离文档头部的高度；2、使用【$(document).scrollLeft()】获取水平滚动条的距离。本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 jquery使用滚动条监听事件的方法：先来一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function(){//在文档加载完毕后执行 $(...