原生js实现锚点滚动顶部

最新推荐文章于 2024-08-15 10:26:19 发布

白的夜gxw

最新推荐文章于 2024-08-15 10:26:19 发布

阅读量337

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_63228975/article/details/132001819

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript的scrollIntoView方法将DOM元素滚动到其父元素的顶部，包括基本用法和高级选项，如配置行为动画效果和滚动位置。通过设置behavior为smooth可添加平滑滚动，block选项可控制滚动至顶部、底部或中间。

摘要由CSDN通过智能技术生成

简介

使用原生js API实现滚动到指定容器的顶部，API是scrollIntoView

使用

let el=docment.querySelector() 获取dom元素
el.scrollIntoView()该元素滚动到其父元素的顶部

高级用法

scrollIntoView(Options)

//option可以配置如下
options={
  behavior：'smooth',//光滑效果
  block:  'start'|'end'|'center' //滚动到容器顶部|底部|中间
}

完整用法可以去MDN点我查看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白的夜gxw

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

彭世瑜的博客

07-12

1万+

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

原生js监听滚动条_原生JS实现滚动条监听

weixin_39875941的博客

12-20

2186

本文主要利用原生的javascript实现滚动条事件的监听，主要涉及的知识：(1)利用React组件渲染一个UI页面(2)实现锚点链接(3)实现滚动条onscroll事件其中,利用React渲染的UI延续了React状态提升中的内容，只是在这个基础上做了一点相应的修改最终得到的DOM页面的结构如下：(2)锚点链接：锚点是页面中的一种超链接，主要体现为：通过点击命名锚点，最终指向页面中的某一部分，也...

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

javascript滚动到顶部scrollTop用法

weixin_50367873的博客

04-14

2万+

js：锚点、操作滚动条滑动scroll

qq_43548684的博客

12-21

2073

长文档高页面中：想一次性回到顶端、想一次性拉到最后面、想点击某个目录按钮、展示某个目录的内容，则锚点与滚动条滑动值得你拥有，总得学会一种方式吧~

js实现元素滚动到目标容器头部

最新发布

qq_51588002的博客

08-15

819

在容器存在滚动条,并且需要通过点击将元素显示在目标容器顶部(不是window)

页面锚点整理及使用scrollIntoView()导致导致整个页面上移问题处理

hetingtingitsme的博客

03-22

1万+

常用场景：页面锚点，点击跳转页面某固定位置 1.element.scrollToView() （1）当页面有fixed顶部的布局时，由于fixed布局的元素脱离文档流，被scrollToView()的元素会被置顶到页面最顶部，导致部分被fixed布局的元素遮挡，因此不太适用。（2）可用于页面没有fixed布局，常见的是顶部需要固定位置时可用element.scrollToVi...

锚点定位及页面滑动到指定dom

陈景夏

04-19

777

先介绍下API及参数： document.querySelector('#需要定位的ID').scrollIntoView({ behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start" inline: "nearest" // 定义水平方向的对齐， "start"

JS如何实现在页面上快速定位（锚点跳转问题）

10-19

然后使用字符串分割方法提取锚点值，并使用jQuery选择器选取该锚点对应的目标元素，计算其顶部偏移量，并使用window.scrollTo()方法或jQuery的scrollTop()方法实现页面滚动。综上所述，JS实现页面快速定位主要涉及...

原生JS实现平滑回到顶部组件

10-22

下面是一个简洁的原生JS实现返回顶部组件的示例： ```javascript var BackTop = function (domE, distance) { if (!domE) return; var _onscroll = window.onscroll, _onclick = domE.onclick; window....

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

10-17

以下是如何使用原生JavaScript来实现这一功能的详细步骤：首先，我们需要分析HTML结构。在`main.vue`文件中，我们可以看到一个名为`quiz-container`的容器，其中包含了一系列带有不同ID的子组件。这些ID对应于导航...

vue3实现导航栏绑定内容锚点+滚动动画

qq_40184218的博客

06-16

3390

vue3实现导航栏绑定内容锚点+滚动

js/html实现滚动到顶部底部某个指定位置

09-20

js/html实现滚动到顶部底部某个指定位置简单易懂上来就能使用

分享 10个简单实用的 JS 代码技巧

欢迎光临

07-05

704

我们经常需要这样做，在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的userAgent来确定的。有时候我们需要将元素滚动到可见区域，怎么办？除了区分是手机端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道文档的高度，也可以平滑滚动到页面底部。需要一种适用于所有平台的防止事件冒泡的方法。

js 滚动条可滚动到顶部或底部

m0_65730686的博客

07-11

513

js 滚动条可滚动到顶部或底部

js监听页面或元素scroll事件，滚动到底部或顶部