JS滑动到页面顶部（或底部）

原创 已于 2022-12-13 09:37:39 修改 · 4.8w 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2018-05-24 16:39:57 首次发布
本文介绍了两种网页滚动的方法：一种适用于自然布局的长页面，通过 window.scrollTo 实现页面的顶部和底部滚动；另一种适用于上下固定中间滑动布局的页面，利用 scrollIntoView 方法实现中间滑动区域的顶部滚动。

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

1.如果页面是自然布局，一个长页面：

        window.scrollTo:

        1）滑动底部

window.scrollTo(0, document.documentElement.scrollHeight)

        2）滑动顶部

window.scrollTo(0, 0)

2.如果是上下固定，中间滑动的布局：

        scrollIntoView：

中间滑动的元素，它设置了overflow：auto，自带滚动条，假设它id=container 

        1)滑动顶部

document.getElementById('container').scrollIntoView()

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总
彭世瑜的博客
07-12 1万+
可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
JS自动操作滚动条-自动滚轮到最下面/最底部
STR_Liang的博客
04-18 1万+
JS自动操作滚动条-自动滚轮到最下面/最底部
js、react、vue里滚动到底部加载数据和滚动到顶部实现（js监听滚动事件，到底部请求接口）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-11 4804
前言： 最近在做一个项目，一个列表展示原本是分页器，点击下一页，请求接口。但是业务说需要改成滑倒底部，加载数据。 一、实现过程 1.html+js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
js滚动条保持在最底部的方法，场景：聊天室
最新发布
Web_Notes的博客
05-12 338
Vue项目中让滚动条始终处于最底部
js 默认滚动到最底部
热门推荐
“明明很开心”的博客空间
05-22 3万+
首先，想要默认滚动到最底部，思路是： 判断页面/元素是否出现了滚动条 —— 判断方法是：页面/元素高度有没有超过滚动高度 若有滚动条即把滚动条滚动到最底部 现在我们来了解几个dom属性: scrollTop:获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0 scrollHeight:这是一个只读属性，是元素内容高度的度量，...
js页面滚动到底部
xiaoququ的博客
11-18 3411
window.scrollTo(0, document.documentElement.clientHeight)
JS滑动到底部
catherine的博客
04-23 1273
$(window).scroll(function(){ 　　var scrollTop = $(this).scrollTop(); 　　var scrollHeight = $(document).height(); 　　var windowHeight = $(this).height(); 　　if(scrollTop + windowHeight == scrollHeight){ 　　　　alert("已经到最底部了！"); 　　} }); ...
js判断滚动条是否已到页面最底部或顶部实例
03-16
在网页开发中，判断用户是否滚动到了页面的顶部或底部是一项常见的功能需求。这通常与实现“返回顶部”按钮的显示与隐藏有关。在本文中，我们将深入分析如何使用JavaScript来判断滚动条是否到达了页面的最顶部或最...
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
10-19
在JavaScript中，H5页面的上下滑动方向判断以及检测是否滑动到顶部或底部是移动设备上常见的交互需求。这些功能可以用于实现如导航栏的自动隐藏和显示、滚动到底部加载更多数据等效果。下面将详细介绍如何使用...
js实现滑动到页面底部自动加载更多功能
10-20
在进行网页内容的展示时，常常会遇到大量内容需要分批次加载的情况，这时候就需要实现一个“滑动到页面底部自动加载更多内容”的功能。该功能可以有效改善用户阅读体验，避免一次性加载过多数据导致页面响应过慢的...
js实现滚动条滚动到页面底部继续加载
11-23
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d
【JS】设置滚动属性默认自动滚动到底部（overflow:scroll；）
qq_45677671的博客
07-19 5331
设置滚动属性默认自动滚动到底部，及应用场景案例（实现对话功能）
js 滚动条可滚动到顶部或底部
m0_65730686的博客
07-11 1025
js 滚动条可滚动到顶部或底部
js 滚动到顶部
高先生的猫
05-28 409
// 使用document.documentElement.scrollTop 或 document.body.scrollTop 获取到顶部的距离，从顶部 // 滚动一小部分距离。使用window.requestAnimationFrame()来滚动。 // @example // scrollToTop(); function scrollToTop() { var c = document.documentElement.scrollTop || document.body.scrollTop;.
JS滚动到指定元素以及判断滚动条到底部
★匆匆★的专栏
02-15 589
【代码】JS滚动到指定元素以及判断滚动条到底部。
JS 界面滚动到顶部的多种方法，复制即用（卷王成长日记）。
Blues_han的博客
10-31 1147
JS实现界面滚动到顶部的多种方法：document.body.scrollTop = document.documentElement.scrollTop = 0;
js 将页面滚动到最底部
博客
03-23 824
将滚动条滚动到页面最底部
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; 网页被卷去的高：
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值