js如何控制整个页面滚动条的位置

原创已于 2022-05-30 08:22:14 修改 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

于 2021-09-14 15:35:55 首次发布

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

本文介绍了两种网页滚动控制的方法。方法一是通过JavaScript操作DOM元素的scrollTop和scrollLeft属性来改变垂直和水平滚动条的位置。方法二是利用HTML锚点实现页面定位，通过点击链接快速跳转至页面特定区域。这两种技术在网页交互和布局优化中常被使用。

方法一

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例：

<body>

//d1是外层div，带滚动条

<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>

<div style='height:500px;width:500px;background:yellow'>2222</div>

</div>

</body>

<script>

document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置

</script>

方法二

2、用html锚点
如下：

<a href="#test">aaaaa</a>

<div id="test">lalallalalalala</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

stefanie_sun723

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

彭世瑜的博客

07-12

1万+

可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;

Vue - 详细实现动态改变元素容器（非页面body）滚动条位置，在一个容器内设置滚动条，并通过 js 改变滚动条位置教程（设置指定子元素div的滚动条位置）

🏆 前端领域优质创作者

08-25

4999

Vue-动态改变元素容器（非页面body）滚动条位置（设置指定子元素div的滚动条位置），解决Vue页面固定滚动位置，根据ref来获取元素or组件的滚动条位置，如何设置div滚动条的位置，怎么动态设置滚动器元素容器非页面滚动条的指定位置，vue动态改变指定元素滚动条的位置，vue页面使用keep-alive缓存后，点击进入详情页后返回时发现滚动条位置回到了顶部怎么办，Vue-页面缓存（keep-alive）后滚动条回到了顶部，不在原来的位置了（从详情页返回列表时发现滚动条位置回到了最顶部，并没

参与评论您还未登录，请先登录后发表或查看评论

js控制滚动条的位置

12-27

js控制滚动条的位置

js将滚动条滚动到指定位置的简单实现方法

10-22

下面小编就为大家带来一篇js将滚动条滚动到指定位置的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

使用JavaScript实现可按钮控制的Div内容滚动功能

最新发布

weixin_42612804的博客

09-13

985

div>是HTML中最常用的块级容器元素，常用于组织和布局页面内容。scrollTop是一个 DOM 属性，用于设置或返回一个元素的内容垂直滚动的像素数。也就是说，它表示元素内容在垂直方向上已经滚动的距离。当内容超出元素的可视区域时，scrollTop的值越大，表示用户向下滚动得越多。语法如下：// 设置滚动位置// 获取当前滚动位置element：可以是任何具有滚动能力的 HTML 元素（如div），也可以是window对象。value：要设置的滚动位置，单位为像素。

js控制div内的滚动条的位置

weixin_43422861的博客

08-23

1765

<body> //d1是外层div，带滚动条 <div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'> <div style='height:500px;width:500px;background:yellow'>2222</div> </div> </body> <script> document

JS 滚动条控制

weixin_45456477的博客

07-20

1962

缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。

JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

10-26

除了上述基础方法，JQuery还提供了一些高级选项，例如`offset()`方法中的`options.relativeTo`可以指定一个祖先元素作为计算偏移量的基准，而`options.scroll`和`options.padding`选项则可以控制是否将滚动条位置和...

jq \ js控制页面滚动到指定位置

weixin_56383764的博客

06-11

1638

通过jQuery、JavaScript随意控制页面滚动条的位置

JavaScript实现元素滚动条到达一定位置循环追加内容

10-18

关于利用JavaScript实现元素滚动条到达一定位置时循环追加内容，本篇文章详细地介绍了相关的实现方法和思路。在编写这段代码时，作者首先定义了一个HTML页面的结构，并利用CSS设置了样式。接着，通过JavaScript实现...

Javascript 获取滚动条位置等信息的函数

10-29

总的来说，理解和掌握如何在JavaScript中获取滚动条位置对于开发交互性强、用户体验良好的网页应用至关重要。通过编写兼容各种浏览器的函数，我们可以确保我们的代码能在大部分用户环境中正常工作。

js控制滚动条缓慢滚动到顶部实现代码

12-11

先把下面的代码拷贝到个html中，运行看效果代码如下: <html> <head> [removed] var currentPosition,timer; function GoTop(){ timer=setInterval(“runToTop()”,1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition-=10; if(currentPosition>0)

JS控制滚动条联动

01-20

多个DIV,JS控制DIV之间的滚动条联动

JS控制滚动条滚动

m0_62758542的博客

11-28

968

JS控制滚动条滚动

js控制滚动条位置

iYNing的博客

08-26

4650

js控制滚动条位置

js控制滚动条滚动

前端程序猿的博客

03-31

7106

JavaScript 可以通过操作scrollTop在上面的示例中，首先通过获取需要滚动的元素，然后设置scrollTop属性为需要滚动到的位置，即可实现控制滚动条滚动。如果需要平滑滚动，可以使用在上面的示例中，首先获取需要滚动的元素和目标位置，然后设置动画的持续时间。在scrollTo函数中，通过计算当前进度和位置，来实现平滑的滚动效果。在滚动动画未完成时，调用方法来继续滚动，直到动画完成为止。

js控制滚动条

LiCeRForDream的专栏

05-19

2124

使用js控制窗口滚动条 window.scrollTo(x,y);竖向滚动条置顶(window.scrollTo(0,0);)。

如何用Javascript控制滚动条(ScrollBar)的位置(上下和左右)

java专栏

04-24

8967

总的来说在Javascript中有三种方法能够控制滚动条的位置，下面我们就分别来看看吧！方法一：用scroll函数实现 scroll(x,y); x代表横向滚动条的位置，也就是控制左右位置，当为0时代表最左边，当为document.body.scrollWidth时代表最右边 y代表纵向滚动条的位置，也就是控制上下位置，

页面布局中滚动条的使用技巧

使用JavaScript控制滚动条行为有时需要使用JavaScript来控制滚动条的行为，比如通过脚本改变滚动位置。使用`scrollIntoView()`、`scrollTop`和`scrollLeft`等属性和方法可以实现滚动条的控制。 ```javascript //...