原生js实现锚点滚动顶部

最新推荐文章于 2025-04-02 00:02:01 发布

原创最新推荐文章于 2025-04-02 00:02:01 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

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

简介

使用原生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

2302

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

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

原生Js回到顶部效果

TimeToBeWinner

08-05

3797

前言：使用原生js实现简单的回到顶部效果。需求比较明确：1.显示与隐藏按钮。2.中途再次触发onscroll清除定时器（暂时未实现，希望各位赐教）代码： <!-- Time:2016.8.4 author:Joel Dom操作 1.document.getElementById 根据ID获取标签元素 2.document.documentElement.scrollTop

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

陈景夏

04-19

851

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

js 滚动到顶部_原生 JS 实现移动端 Touch 滑动反弹

weixin_39534149的博客

11-28

622

什么是 Touch滑动？就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下：1. 准备工作什么是移动端的 Touch事件？在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 touchend，并且 touch事件必须要用 addEventListener去监听。touchStart...

javascript滚动到顶部scrollTop用法

热门推荐

weixin_50367873的博客

04-14

2万+

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....

HTML和JS实现锚点平滑滚动教程分享

在使用JavaScript实现锚点平滑滚动时，通常需要监听链接的点击事件，获取到目标锚点的ID，然后通过计算目标锚点元素距离页面顶部的距离，使用window.scrollTo函数来实现平滑滚动。这个过程可以自定义滚动的速度和缓...

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

10-17

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

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

09-20

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

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

qq_43548684的博客

12-21

3229

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

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

hetingtingitsme的博客

03-22

1万+

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

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

qq_51588002的博客

08-15

2141

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

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

m0_65730686的博客

07-11

1068

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

滚动吸顶加锚点跳转及其滚动穿透案例

社会人

10-10

564

主要用到两个知识点position: sticky; a标签的描点 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl.

使某个dom元素匀速滑动到容器顶部

haosicx的博客

07-31

589

这个函数接受3个参数。

JavaScript页面事件与滚动