js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

已于 2023-07-12 13:21:20 修改
阅读量1.1w 收藏 19
点赞数 3
分类专栏： JavaScript/Node.js 文章标签： javascript 开发语言 ecmascript
于 2023-07-12 13:16:30 首次发布
本文为博主原创文章，欢迎转载，请注明出处
本文链接：https://blog.youkuaiyun.com/mouday/article/details/131678336
版权

目录

准备知识：

  • scrollWidth: 是元素全部内容的宽度，包括由于overflow溢出而在屏幕上不可见的内容
  • scrollHeight: 是元素全部内容的高度，包括由于overflow溢出而在屏幕上不可见的内容
  • scrollTop: 纵向滚动条距离元素最顶部的距离
  • scrollLeft: 横向滚动条距离元素最左侧的距离

1、CSS的scroll-behavior

语法

scroll-behavior: auto | smooth | inherit | unset

参数
- smooth：表示滚动很平滑，有过渡效果
- auto：没有过渡效果，一闪而过。

关键代码

html, body {
   
  scroll-behavior
了解本专栏 订阅专栏 解锁全文 超级会员免费看
OpenLayer示例网址汇总
sdfvsdfsdfsdfsd的博客
03-12 2332
1.https://openlayers.org/en/latest/examples/feature-move-animation.html 图标 行进轨迹动画 使用后期渲染事件和矢量上下文沿线对标记要素设置动画。在该示例中，使用了编码折线。 2.https://openlayers.org/en/latest/examples/utfgrid.html?q=dynamic-data 有用...
web前端面试题及答案汇总
dongyang0311
06-26 1万+
Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写 ？ 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 页面导入样式时，使用link和@import有什么区别？ 介绍一下你对浏览器内核的理解？ 常见的浏览器内核有哪些？ html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼
js判断dom元素滚动条到达底部的算法，滚动，鼠标控制分页显示数据，
weixin_54048131的博客
09-14 989
如何监听元素滚动条</section><section>如何监听元素滚动条</section><section>如何监听元素滚动条</section><section>如何监听元素滚动条</section><section>如何监听元素滚动条</section><section>如何监听元素滚动条</section><section>如何监听元素滚动条监听dom元素滚动条.html
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
iscroll.js：移动Web应用滚动交互解决方案
weixin_30248619的博客
03-11 955
本文还有配套的精品资源，点击获取 简介：iscroll.js是一个轻量级的JavaScript库，用于处理移动Web应用中的滚动交互。它通过提供跨平台和高性能的解决方案，支持上拉加载更多、下拉刷新等现代移动应用的交互模式。该库支持无限滚动、下拉刷新功能，并允许开发者监听滚动事件，以提升用户体验。通过提供Zoom、Scrollbar、Horizontal和Multitouch...
JavaScript实现平滑滚动
分享学习网络的点点滴滴
06-01 639
● 现在确实可以跳转了，但是细心的小伙伴会发现，这个必须在顶部才能正常跳转，往下面滑动一点就不行了，因为页面滑动就会章节的到顶部的X轴就会变动，我们必须加上滑动的距离才可以。//通过调用e.target.getBoundingClientRect()，你可以获取触发点击事件的元素相对于视口的位置和尺寸信息。● 我们也可以输出输出视口（viewport）的高度和宽度，也就是可见视口的高度。● 现在就简单了，我们只需要点击按钮的时候更改一下我们想要的章节坐标即可。● 首先我们获取到按钮信息和想要滚动到得章节。
javascript滚动到顶部scrollTop用法
weixin_50367873的博客
04-14 2万+
首先了解下列相关属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高：
js 将页面滚动到最底部
博客
03-23 677
将滚动条滚动到页面最底部
JS滑动到页面顶部（或底部）
热门推荐
xiaopeng_han123的博客
05-24 4万+
window.scrollTo(0, document.documentElement.clientHeight);
dim-spa核心组件：JavaScript实现滚动条
在本篇知识汇总中，我们将详细探讨JavaScript在创建和操作滚动条中的应用，同时结合相关技术细节，介绍如何在web页面中实现平滑滚动、动态内容加载和响应用户交互等功能。 ### JavaScript与滚动条 JavaScript是web...
前端知识宝典
qq_37759901的博客
01-29 1318
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
scrollTo:纯js实现平滑滚动
05-01
scrollTo 纯js实现平滑滚动 特性 支持滚动到确定位置 支持zepto/jquery对象的传入 压缩后大小不到1kb 无需zepto/jquery也可以正常使用 使用场景 返回顶部 点击侧栏的ABCDE...字母滚动到指定区域,用于城市列表选择等 引用 引入scrollTo.min.js: [removed][removed] 示例 $('.charlist').delegate('.react','click',function(){ var href = $(this).attr('href').substr(1); $.scrollTo($('#sub-' + href)); //$scrollTo($('#sub-' + href)); //纯js这样使用 ret
js实现图片平滑滚动效果
10-01
js实现漂亮的图片平滑滚动效果
js实现滚动条滚动到页面底部继续加载
11-23
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d
js 滚动条可滚动到顶部或底部
m0_65730686的博客
07-11 965
js 滚动条可滚动到顶部或底部
js将元素滚动条移动到最下方
weixin_43932092的博客
04-24 900
【代码】js将元素滚动条移动到最下方。
js 滚动到顶部（通用）
PrimaryColor
03-16 468
jquery代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> &
js的scroll详解
jggnice的博客
05-17 5671
scrollTop : 滚动条滚动距离 说明：chrome下他会以为滚动条是文档元素的，所以需要做兼容 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 我们来验证下chrome是否存在兼容的问题： <!DOCTYPE html> <html la...
原生JS实现页面平滑滚动
Jay的博客
01-27 1万+
前言 页面平滑滚动是网页一种常见的效果。那如何用原生的JS实现这也效果呢？ 原理 平滑滚动的原理其实很简单。无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置。故而，要实现平滑滚动效果，我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。 获取起始位置和终点位置 想要获取起始位置和终点位置，那就必须确定参考点。在网页中，常用的参考点是页面左上角。（注意，我这里所要实现...
底部
最新发布
03-14
### 底部布局 UI 设计 在讨论底部布局的 UI 设计时，可以从多个角度来考虑其设计原则和实现方法。以下是对该主题的具体解析： #### 1. **常见的底部布局模式** - 常见的底部布局通常采用固定位置的方式呈现，以便用户能够快速访问核心功能。例如，在移动端应用中，底部导航栏是一种非常典型的布局形式[^1]。 - 对于复杂的应用场景，抽屉式布局也可以被用于隐藏次要功能，从而简化界面视觉效果。然而需要注意的是，初次使用的用户可能会因为这些功能被隐藏而难以发现它们的存在，因此需要通过新手引导或其他提示机制帮助用户熟悉操作流程[^2]。 #### 2. **手势导航对底部布局的影响** - 在 Android 10 的 SystemUI 中引入了手势导航的概念，这改变了传统的三键导航方式，并带来了新的交互体验挑战。当从三键导航切换至手势导航时，默认会出现一条黑色横线作为指示器。如果这条黑线被认为影响美观，则可以通过自定义样式或者调整布局参数将其移除[^3]。 - 类似地，在 MTK Android 12 的 SystemUI 实现中也遇到了类似的底部布局问题——即如何处理仅显示中间的小提醒方块的情况。解决这一类问题往往涉及深入研究 NavigationBar 的内部逻辑及其关联组件的行为特性[^4]。 #### 3. **优化用户体验的关键点** - 结合不同类型的布局策略（如固定菜单、滑动面板等），可以根据具体业务需求灵活运用多种技术手段达到最佳展示效果。同时也要注意保持一致性原则，使得整个应用程序内的各个页面之间具有统一风格。 - 此外还需关注性能因素；过度复杂的动画过渡或过多图层叠加可能导致设备资源消耗增加进而降低流畅度水平。所以在实际开发过程中应当权衡好功能性与效率之间的关系。 ```java // 示例代码：隐藏Android系统的默认状态/导航栏 public void hideSystemBars() { WindowInsetsControllerCompat windowInsetsController = ViewCompat.getWindowInsetsController(getWindow().getDecorView()); if (windowInsetsController != null) { // 隐藏状态栏和导航栏 windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); } } ``` 上述 Java 方法展示了如何利用 `WindowInsetsControllerCompat` 来控制 Android 系统的状态栏及导航栏可见性设置。这对于构建沉浸式的全屏应用场景特别有用。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值