关于scrollTop踩过的坑

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。提示:当滚动条位于最顶部时,位置是 0。

当用于返回位置时:
该方法返回第一个匹配元素的滚动条的垂直位置。

当用于设置位置时:
该方法设置所有匹配元素的滚动条的垂直位置。

关于document.body.scrollTop总是为零的原因和解决方案:
1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

解决办法:
页面指定了DOCTYPE时,使用document.documentElement。
页面没指定DOCTYPE时,使用document.body。
IE和Firefox都是如此。

完美的获取scrollTop 赋值短语 :

    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
### 使用 `scrollTop` 实现页面滚动效果 #### 什么是 `scrollTop` `scrollTop` 是 JavaScript 中的一个属性,用于获取或设置某个元素顶部相对于其可滚动区域的距离。当应用于整个文档时,它可以表示当前页面被垂直滚动的高度。 可以通过以下方式访问 `scrollTop` 属性: - 对于标准 DOM 元素:`element.scrollTop` - 对于整个文档,在现代浏览器中可以使用两种方法之一: - `document.body.scrollTop` (适用于某些旧版浏览器) - `document.documentElement.scrollTop` (推荐用于大多数现代浏览器) 为了确保跨浏览器兼容性,通常会结合这两种方式进行判断[^4]。 ```javascript function getScrollTop() { return (document.body.scrollTop || document.documentElement.scrollTop); } ``` #### 设置页面滚动到指定位置 要使页面滚动到特定高度,可以直接修改 `scrollTop` 的值: ```javascript // 将页面滚动至顶部 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; // 滚动到任意高度(例如 500px) document.documentElement.scrollTop = 500; document.body.scrollTop = 500; ``` 如果目标是让页面平滑滚动,则可以借助 CSS 的 `scroll-behavior` 属性或者原生 JS 编写动画逻辑[^5]。 #### 平滑滚动实现 以下是基于定时器的简单平滑滚动函数示例: ```javascript function smoothScroll(targetY, duration) { const start = window.pageYOffset; const distance = targetY - start; let startTime = null; function animation(currentTime) { if (!startTime) startTime = currentTime; const timeElapsed = currentTime - startTime; const progress = Math.min(timeElapsed / duration, 1); // 防止超出范围 window.scrollTo(0, start + distance * easeInOutCubic(progress)); if (progress < 1) requestAnimationFrame(animation); } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } requestAnimationFrame(animation); } smoothScroll(800, 1000); // 滚动到 800px 处,持续时间为 1 秒 ``` 此代码实现了带有缓入缓出效果的平滑滚动功能。 #### jQuery 方案 虽然现在主流开发更多依赖纯 JavaScript 或框架库,但如果项目中有引入 jQuery,也可以利用它简化操作。下面是一个简单的例子展示如何绑定滚动事件并调整固定元素的位置[^3]: ```javascript $(document).ready(function () { var $fixedElement = $('.fixed-element'); var initialOffset = $fixedElement.offset().top; $(window).on('scroll', function () { var scrollTop = $(this).scrollTop(); if (scrollTop >= initialOffset) { $fixedElement.addClass('sticky').css({ top: '0' }); } else { $fixedElement.removeClass('sticky').css({ top: `${initialOffset - scrollTop}px`, }); } }); }); ``` 这里通过监听窗口的 `scroll` 事件动态改变 `.fixed-element` 的样式类及其具体偏移量。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值