js让页面平滑滚动到内容的最下方

已于 2023-03-22 15:22:11 修改
阅读量860 收藏
点赞数 1
分类专栏： JS 文章标签： 前端 html javascript Powered by 金山文档
于 2023-03-14 09:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinmanman_dev/article/details/129517650
版权 

<body id="scrollContent" class="body h-full overflow-y-auto">
</body>
<script>
    window.onload = function() {
        let height = document.getElementById('scrollContent').scrollHeight;
        window.scrollTo({top:height, left:0, behavior:'smooth'})
        // 如果是在某一区域内滚动（不是body范围，div设置了最大高度 超出部分滚动）
        // document.getElementById('divIdName').scrollTo({top:height, left:0, behavior:'smooth'})
    }
</script>

yinmanman_dev
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js滚动到指定页面高度
唯-心的专栏
05-13 1万+
js-页面打开后滚动到特定位置的效果 　　滚动页面的方法有scroll、scrollBy和scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动到页面底部，所以参数x为0，y为页面的滚动高度。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。  　　具体步骤：  　　方法一：用scroll方法实现。  　　
js实现页面滚动返回顶部
60rzvvbj的博客
07-31 7608
许多网站的右下角都有一个可以使页面返回顶部的按钮 例如这些网站： 返回顶部我们可以用锚点链接来实现，但是锚点链接它突然闪到页面顶部有点不太好看 如果页面是滚动着回到顶部的话会好看很多 那么，开始今天的正题 #前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码在后面 先搞几个盒子和一个用来添加点击事件的按钮 <div>模块1</div> <div>模块2</div> <div>模块3</div> <div>模块4
js中让页面滚动到某个div的位置
weixin_45389051的博客
03-21 375
【代码】js中让页面滚动到某个div的位置。
js 滚动条自动滚动到最底部
qq_45475788的博客
12-15 1万+
<div id="box"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> 要让box这个div随着里面内容的增加，滚动条一直处于最底部 css: 给div设置固定高度，并且竖向超出滚动 #box{height:200px;overflow-y:auto} js: var div ...
js将元素滚动条移动到最下方
最新发布
weixin_43932092的博客
04-24 152
【代码】js将元素滚动条移动到最下方。
如何用js控件div的滚动条，让它在内容更新时自动滚到底部？
weixin_30782331的博客
05-20 169
三种控制DIV内容滚动的方法：方法一：使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置<script language="javascript1.2" type="text/javascript">function onGetMessage(context){msg.innerHTML+=context;msg_end.click();}</scr...
JS滑动到页面顶部（或底部）
热门推荐
xiaopeng_han123的博客
05-24 4万+
window.scrollTo(0, document.documentElement.clientHeight);
js 默认滚动到最底部
“明明很开心”的博客空间
05-22 3万+
首先，想要默认滚动到最底部，思路是： 判断页面/元素是否出现了滚动条 —— 判断方法是：页面/元素高度有没有超过滚动高度 若有滚动条即把滚动条滚动到最底部 现在我们来了解几个dom属性: scrollTop:获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0 scrollHeight:这是一个只读属性，是元素内容高度的度量，...
js：scroll平滑滚动页面或元素到顶部或底部的方案汇总
彭世瑜的博客
07-12 9757
可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;
javascript 设置滚动条在最底层
11-13 3106
javascript 设置滚动条在最底层。
JS自动操作滚动条-自动滚轮到最下面/最底部
STR_Liang的博客
04-18 1万+
JS自动操作滚动条-自动滚轮到最下面/最底部
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
js实现滚动条滚动到页面底部继续加载
11-23
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d
js判断滚动条是否已到页面最底部或顶部实例
03-16
主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下
JavaScript控制网页平滑滚动到指定元素位置的方法
12-11
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下： function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj....
xiii.scroll.js:可以平滑滚动到指定位置JavaScript库
05-18
可以平滑滚动到指定位置JavaScript库 功能 XIII.scroll(target:Element, targetDuration:Number = 1):void XIII.scroll(targetElementId:String, targetDuration:Number = 1):void XIII.scroll(targetY:Number, ...
当滚动条滚动到页面底部自动加载增加内容的js代码
01-19
2，相关获取页面高度、滚动条位置、文档高度的函数： 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { ...
纯js页面平滑滚动插件
12-11
smoothscroll.js是一款纯js页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为window对象的扩展，用户可以通过window对象直接调用平滑滚动的方法。
【JS】设置滚动属性默认自动滚动到底部（overflow:scroll；）
qq_45677671的博客
07-19 3625
设置滚动属性默认自动滚动到底部，及应用场景案例（实现对话功能）
js 平滑滚动到页面最底部
06-09
要实现平滑滚动到页面最底部，可以使用 `window.requestAnimationFrame()` 方法和 `window.scrollTo()` 方法结合起来。 以下是示例代码： ```javascript function smoothScrollToBottom() { const currentPosition = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const distance = scrollHeight - currentPosition; const duration = 500; let startTime = null; function animation(currentTime) { if (!startTime) { startTime = currentTime; } const timeElapsed = currentTime - startTime; const scrollTo = easeInOutQuad(timeElapsed, currentPosition, distance, duration); window.scrollTo(0, scrollTo); if (timeElapsed < duration) { requestAnimationFrame(animation); } } function easeInOutQuad(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t + b; t--; return -c / 2 * (t * (t - 2) - 1) + b; }; requestAnimationFrame(animation); } ``` 在这个函数中，我们首先获取当前滚动位置和页面总高度，然后计算滚动距离和持续时间。接下来，我们使用 `requestAnimationFrame()` 方法循环执行动画，每一帧更新滚动位置，直到滚动到底部。 `easeInOutQuad()` 函数是一个缓动函数，它将动画效果变得更加平滑。你可以通过更改缓动函数来改变滚动效果。 最后，你只需要调用 `smoothScrollToBottom()` 函数即可平滑滚动到页面最底部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值