jQuery使用scroolTop监听滚动条

最新推荐文章于 2022-11-06 08:13:21 发布
最新推荐文章于 2022-11-06 08:13:21 发布
阅读量497 收藏 1
点赞数
分类专栏： Web前端 文章标签： jQuery 前端 scroolTop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine_kevin/article/details/86619555
版权
这篇博客记录了在实现返回顶部按钮时遇到的浏览器兼容性问题，特别是Chrome和Firefox、IE之间的差异。博主分享了一段代码，通过判断scrollTop确保在不同浏览器中都能正确工作，包括IE9及更早版本。
摘要由CSDN通过智能技术生成

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

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

直接上代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>滚动监听，入返回顶部，或者滚动中途的广告</title>
    <style>
        *{
    padding: 0;margin
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Bootstrap3的滚动监听（Scrollspy）jQuery插件
12-12
dynamic-scrollspy是一款基于Bootstrap3的滚动监听（Scrollspy）jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果，它会自动为你添加一个侧边栏导航，并设置好原生的Bootstrap滚动监听。
jquery.nicescroll完美滚动条使用方法
06-10
一款非常完美的滚动条，简称nicescroll自定义滚动条，兼容性良好，可以完美兼容IE 6 7 8 火狐 谷歌等几乎目前都在用的浏览器，使用方法简单。 只要依次引入jquery库以及jquery.nicescroll插件，然后将需要滚动部分...
jquery监听滚动条
weixin_30432579的博客
03-05 257
$(".lx").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$(this).get(0).scrollHeight,//内容高度 scrollTop =$(this).scrollTop()...
Jquery滚动条监听事件
weixin_30951743的博客
01-29 373
　　先来一个例子： $(document).ready(function(){//在文档加载完毕后执行 $(window).scroll(function(){//开始监听滚动条 //获取当前滚动条高度 var topp = $(document).scrollTop(); //用于调试 弹出当前滚动条高度 ...
jquery监听滚动条，实现“返回顶部”
m0_72495985的博客
11-06 1256
我们在浏览网页时，网页内容过多会使得滚动条缩小并越来越靠近页面底部，当想返回到页面最顶端时靠滚动鼠标会很麻烦，因此在很多网页在靠近滚动条处都有一个“返回顶部”等内容的按钮，以快速的回到页面最顶端。
jquery滚动监听插件waypoints
IT1125275074的博客
10-22 648
waypoints：用于捕获各种滚动事件的插件&&还支持固定元素和无限滚动的功能，功力十分强大。 Waypoints使用方法：step1：下载waypoints插件（importpath） <scriptsrc="jquery.min.js"></script> <scriptsrc="waypoints.min.js"&gt...
jQuery判断是否存在滚动条的简单方法
10-21
在jQuery中，可以使用`scrollTop()`方法来读取或设置被选元素的垂直滚动条的偏移量。如果页面元素具有滚动条，那么滚动条的偏移量将会大于0；反之，则为0。这个特性就是本文所描述方法的基础。 具体实现如下： 1. ...
使用jQuery判断浏览器滚动条位置的方法
10-22
对于滚动条滚动到底部和头部的判断，我们在之前的滚动方向判断函数中已经有所涉及，但这里我们再次明确列出具体的函数来强调其重要性。在scrollDirect函数中，我们可以使用jQuery的scrollTop方法来获取当前滚动条的...
jQuery实现定位滚动条位置
01-19
jQuery实现滚动条滚动到子元素位置（方便定位） 关键代码如下所示： 　 <tr id=tr-one></tr> <tr id=tr-two></tr> <tr id=tr-three></tr> <tr id=tr-four></tr> jQuery: $(#nurse).scrollTop($(#nurse)....
jQuery自定义滚动条完整实例
11-23
本实例将深入讲解如何使用jQuery实现自定义滚动条的功能。首先，我们需要理解jQuery库的基本用法，这里我们使用的是jQuery 1.9.1版本。 1. **HTML结构**： HTML部分包含一个主容器`#div1`，内部有两个子元素：实际...
jqueryDIV滚动条
12-09
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
12-11
本文使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条。 效果预览网址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍： 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选。规定相对滚动条顶部的偏移，以像素计。 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
依赖于Jquery的滚动监听
谷小伟的博客
08-01 641
固定导航滚动监听，依赖于Jquery 之前一直用的是bootstrap的滚动监听，用的是a标签的锚链接，发现有些不太好的地方，并且最近有些小的网站并不想引入bootstrap一个这么大的插件，似乎对一些网站来说略显臃肿，不管怎么样吧，抽时间自己写了一版，希望可以帮到大家吼！ 先大概其来个效果图 上代码 我的代码总是全篇的哦，比较方便，但是希望大家也要认真缕清楚逻辑的哈 &...
jQuery检测滚动条(scroll)是否到达底部
Carl_Zhang
02-06 4348
一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scr
jquery 监听滚动条滚动加载
ZHAO Q.H.
09-25 359
高度 滚动条距离顶部的高度 浏览器窗口的高度 网页的实际高度 参考滚动到某一位置加载新内容的高度 <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 2588
jquery如何监听滚动条事件？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。问题：在浏览很多网页中都会发现，当滚动条滚动到一定的位置的时候就出显示一个返回到顶部的小图标，那如何监听判断滚动条滚动到指定的位置后触发某个事件呢？方法：可以通过使用$(window).scroll()进行滚动条的监听当用户滚动指定的元素时，会发生 scroll 事件。scr...
Bootstrap页面滚动监听jQuery插件
ICode联盟
02-23 200
下载地址 Scrollspy是基于Bootstrap3的滚动监听jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果，它会自动为你添加一个侧边栏导航，并设置好原生的Bootstrap滚动监听。在原生的Bootstrap中就有滚动监听效果，但是它使用起来相对要复杂一些，你可以在这里找到原生Bootstrap滚动监听插件的使用方法。使用dynamic-scrollspy插件简化了这些操作，你可以通过简单的设置就生成一个非常好的页面滚动监听效果。 dd: ...
滚动监听导航 JQUERY 易懂
神夜空间
03-16 2170
非常易懂一看明白，留着
jquery 滚动条事件
I'm Different
12-16 2877
无标题文档 $(function(){ var lazyheight = 0;    //获取数据 function showload(){  lazyheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  if ($(doc
jquery 监听滚动条滚动事件
最新发布
05-05
可以使用 jQuery 的 `scroll` 方法来监听滚动条滚动事件。 示例代码： ```javascript $(window).scroll(function() { // 在此处编写滚动事件的处理代码 }); ``` 上面的代码中，`$(window)` 选择器表示监听整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值