DOM操作scrollIntoView，实现点击目录跳转对应元素id，置顶到头部

已于 2023-04-10 14:26:21 修改
阅读量241 收藏
点赞数
文章标签： javascript
于 2023-03-27 15:51:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m_e_i/article/details/129797056
版权 
document.getElementById(id).scrollIntoView(true)

孜然卷k
关注
W3C DOM之scrollIntoView的用法
suoyihen
01-10 397
不经意的时候看到QQ邮箱收到附件的时候，有一个效果，如下图所示： 比较好奇的就抓了一下节点，然后看了一下源代码，主要使用了这样一个函数：scrollIntoView scrollIntoView 看到这个函数名的时候，其实也能联想到它的作用(功能)，将一个对象显示在当前window窗口的可视范围之内。 这个是W3C定义的DOM方法，各浏览器均支持，包括：IE5.5+、FF2.0+.......
让DOM元素自动滚到视野内ScrollIntoView
weixin_30625691的博客
07-05 432
概述 项目中需要把一个DOM元素自动滚动到视野内，百思不得其解，最后再element库里面发现了这个方法，记录下来供以后开发时参考，相信对其他人也有用。 参考资料：element scroll-into-view.js 代码 代码如下： /* eslint-disable no-param-reassign */ export default function scrollIntoView(con...
HTML5_ScrollInToView方法
fengye12zjs的博客
12-08 4002
转载地址 HTML5_ScrollInToView方法 标签： scrollInToView
react-native-scroll-into-view:将 ReactNative 视图滚动到可见屏幕中。 类似于 DOMElement.scrollIntoView() 浏览器函数
08-05
react-native-scroll-in-view 将 ReactNative View ref 滚动到ScrollView的可见部分。 类似于用于 Web 的DOMElement.scrollIntoView() ，但有一些额外功能。 yarn add react-native-scroll-into-view // or npm install react-native-scroll-into-view --save 没有本机代码：这个库与 Expo 管理的工作流程兼容。 为什么 ？ 在长可滚动表单上，可以确保用户在提交时可以看到错误： 建立某种“部分索引”： 但实际上你可以自由地用它构建任何你想要的东西 特征： 声明式组件 API 命令式钩子 API 可在多个级别进行配置 不同的对齐方式 插图 打字稿定义 支持组合/引用/其他 ScrollView 包装器（
探索高效滚动展示的奥秘：dom-scroll-into-view
gitblog_00059的博客
06-11 364
探索高效滚动展示的奥秘：dom-scroll-into-view 去发现同类优质开源项目:https://gitcode.com/ 在这个充满动态和互动的网页设计时代，我们常常需要确保特定元素在用户的视口内可见。dom-scroll-into-view 是一个强大且实用的开源库，专门用于解决这个问题。通过优雅的代码实现，它让元素自动滚动至容器的可视区域变得轻而易举。 项目介绍 dom-scroll...
php自动滚动到页尾,让DOM元素自动滚到视野内ScrollIntoView
weixin_39626237的博客
03-20 326
概述项目中需要把一个DOM元素自动滚动到视野内，百思不得其解，最后再element库里面发现了这个方法，记录下来供以后开发时参考，相信对其他人也有用。参考资料：element scroll-into-view.js代码代码如下：/* eslint-disable no-param-reassign */export default function scrollIntoView(container...
js dom.scrollIntoView()和dom.scrollIntoViewIfNeeded()将元素滚动到可视区域
weixin_43294560的博客
01-03 1590
页面（容器）可滚动时才有用！ dom.scrollIntoView() 让当前的元素滚动到和其所在滚动区的可视区域内 dom.scrollIntoView(true); 元素的顶端将和其所在滚动区的可视区域的顶端对齐。 dom.scrollIntoView(false); 元素的底端将和其所在滚动区的可视区域的底端对齐 dom.scrollIntoView({ block:'start/end', 和true/false同理 behavior:'auto/inst
JavaScript高级程序设计之DOM 扩展之HTML5之scrollIntoView()方法第11.3.7讲
Jane617_min的专栏
11-05 3436
如何滚动页面也是DOM 规范没有解决的一个问题。为了解决这个问题，浏览器实现了一些方法， 以方便开发人员更好地控制页面滚动。在各种专有方法中，HTML5 最终选择了scrollIntoView()作 为标准方法。 scrollIntoView()可以在所有HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用 元素就可以出现在视口中。如果给这个方法传入true 作为参数，或者不传入任
vue+vux scrollTop 实现定位到具体dom(scrollIntoView())
李古拉雷
03-29 8671
先看一下最终的运行效果。 项目背景介绍： 技术栈： vue+vux+nodejs 需求：对汽车品牌列表可以按照字母进行索引定位 在开发中实现这种需求，心想还不是小菜一碟，作为一个饱经bug的程序员，别的我就不吹了，最起码Ctrl+C用的还是蛮不错的。 虽然我的复制能力MAX，但最起码的功能点还是要先梳理一下。 要实现这个功能统共分两步， 第一根据点击找到需要定位的位置， ...
vue实现点击标签跳转到对应模块
m0_44949211的博客
12-20 1078
vue实现点击标签跳转到对应模块 注：#apiService是模块id，点击标签时调用jump()方法 //点击菜单显示到对应模块 jump(index) { // this.$nextTick(() => { setTimeout(() => { this.$el.querySelector(`#apiService${index}`).scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "start"
scroll-into-view, 如果可能，将元素滚动到视图中.zip
09-18
scroll-into-view, 如果可能，将元素滚动到视图中 什么将元素滚动到视图中同时滚动任何滚动父对象，使该元素处于视图中。捐赠如果你想在财务上显示你的支持，我是在 Patreon示例示例需要它var scrollIntoView = require('scroll-
scroll-into-view:如果可能，将元素滚动到视图中
05-04
什么 滚动到视图中 同时滚动所有滚动父级，以便可以看到该元素。 捐献 如果您想在财务上显示您的支持， 例子 如何 要求它 var scrollIntoView = require ( 'scroll-into-view' ) ; 用它 scrollIntoView ( someElement ) ; 您可以传递设置来控制时间，缓动以及父项是否是可滚动的有效元素以及对齐方式： 所有选项都是可选的。 scrollIntoView ( someElement , { time : 500 , // half a second ease : function ( value ) { return Math . pow ( value , 2 ) - value ; // Do something weird. } , validTarget
线程导航＋锚点跳转，点击锚点跳转到对应位置
07-10
在上述代码中，`addEventListener`用于监听页面上的点击事件，`preventDefault`阻止了默认的页面跳转，`smoothScrollTo`实现了平滑滚动到目标元素，而`updateThreadNavigation`则根据点击的锚点更新线程导航的状态。...
JS控制div跳转到指定的位置的几种解决方案总结
10-21
scrollIntoView方法是一个较新的方法，它是DOM元素的属性之一，可以让浏览器滚动页面至该元素在视口内可见。 示例代码如下： ```javascript [].slice.call(document.querySelectorAll('a')).forEach(function(el){ ...
Vue2 - 最新详细实现锚点跳转及平滑过渡动画功能，锚点定位滑动吸顶将锚点菜单固定在顶部或悬浮，页面导航菜单跳转指定元素位置、文章目录跳转到对应章节等场景，vue2锚点滚动至指定区域详细示例代码教程
王佳斌
07-05 4663
vue2，nuxt2，锚点，锚点定位，跳转到指定位置，锚点定位跳转，添加锚点，根据文章浏览位置，目录高亮相应标题，锚点定位的目录，竖向滚动条效果并实现锚点定位跳转，滚动与导航联动，导航栏绑定内容锚点+滚动动画，vue锚点平滑滚动，如何设置描点跳转到对应页面，菜单绑定内容锚点滚动动画，锚点滚动过程怎么加入动画，过渡效果，anchor，导航锚点联动，滚动监听和点击平滑滚动跳转实例，页面内跳转锚点的使用，跨页面锚点跳转，锚点滚动，定位滚动，实现锚点定位以及平滑滚动到指定位置，动态锚点定位，页面滚动和点击菜单联动效
jquery获取dom元素_jQuery将DOM元素设置为顶视图Z-索引
05-19 118
jquery获取dom元素 jQuery函数使用CSS Z-Index属性将任何DOM元素设置为Top View（ 置于最前面 ）。 jQuery.fn.mb_bringToFront= function(zIndexContext){ var zi=1; var els= zIndexContext && zIndexContext!="auto" ? $(zI...
[转]W3C DOM之scrollIntoView的用法
weixin_30340745的博客
07-12 128
转：http://hi.baidu.com/meteoric_cry/blog/item/da12efca8e08434af31fe7d6.html 不经意的时候看到QQ邮箱收到附件的时候，有一个效果，如下图所示： 比较好奇的就抓了一下节点，然后看了一下源代码，主要使用了这样一个函数：scrollIntoView scrollIntoView 看到这个函数名的时候，其实也能联想...
scrollIntoView(),描点实现滚动居中
江拥羡橙的博客
01-11 928
用keep-alive两个生命周期activated和deactivated,在activated里执行操作。路由开启keepActive。利用vuex存储id。
vue3 dom元素上没有scrollintoview属性
最新发布
10-11
Vue.js 本身是一个轻量级的前端框架，并不是DOM库，它专注于处理数据绑定和组件化开发。在 Vue 3 中，它并不直接提供 `scrollIntoView` 属性，这个属性其实是浏览器原生支持的一个 DOM API，用于滚动到某个元素使其可见。 如果你想要在 Vue 组件内部实现类似的功能，通常需要借助 JavaScript 或者自定义指令（v-scroll-to）来操作 DOM 元素。例如，你可以创建一个自定义方法，当需要滚动时，通过refs或者计算属性获取到目标元素，然后调用 `element.scrollTo({ top, behavior })` 方法来滚动视图。 这里有一个简单的例子： ```javascript methods: { scrollToElement(elementRef) { elementRef.value && elementRef.value.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } }, // 使用时 <template> <div ref="myElement" @click="scrollToElement($refs.myElement)"> Click me to scroll </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值