vue点击对应文字滚动到当前页面的dom元素的位置

农夫三拳有点疼=-=

已于 2022-05-23 15:40:53 修改

阅读量548

点赞数

文章标签： vue.js javascript 前端

于 2022-05-19 19:22:46 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/124869640

版权

除了锚点跳转

使用scrollIntoView();

页面DOM元素设置好id，vue事件交互中获取该DOM元素后调用该方法scrollIntoView()

如div的id名为top，则vue交互事件中：click（）{

document.getElementById("top").scrollIntoView()

}即可

看代码

DOM

orderNow() {

document.getElementById("top").scrollIntoView()

}

即可

锚点跳转看这里（但是锚点跳转有网址的问题）：(21条消息) vue中请求遍历渲染到页面后，锚点跳转如果不用插件怎么写？_农夫三拳有点疼=-=的博客-CSDN博客

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

农夫三拳有点疼=-=

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue点击对应文字滚动到当前页面的dom元素的位置

scrollIntoView()解决vue点击对应文字滚动到当前页面的dom元素的位置
复制链接

扫一扫

vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

10-16

今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue实现滚动锚点定位

爱兰河少

11-12

2368

效果如图：注意：gd-tabs标签为内部框架组件，使用时替换为自己框架即可 <template> <div class="custom-demo-view" style="padding: 1rem;"> <div> <gd-tabs v-if="reload" @tabclick="jump" v-mode...

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

前端开发攻略---用Vue实现无限滚动的几种方法

最新发布

nibabaoo的博客

05-22

2794

用vue实现无限滚动

vue实现锚点滚动

计算机辅助工程

11-17

1549

全部应用

vue 实现锚点和滚动高亮效果

x_nweBorder01k的博客

08-19

3399

vue 实现锚点和滚动高亮效果

vue项目实现点击导航实现滑动到特定位置。

m0_59476008的博客

08-10

2035

vue节点的获取及应用

vue.js动态文字滚动公告特效代码

03-20

3. **指令**：Vue.js提供了一系列指令，如`v-for`，用于遍历数据并生成对应的DOM元素。在这个场景下，`v-for`会用来循环遍历公告文字数组，逐个显示。 4. **组件**：Vue.js鼓励组件化开发，即将UI拆分成可复用的...

vue滚动插件better-scroll使用详解

10-16

Vue滚动插件Better Scroll是一款专为移动端（同时支持PC）设计的滚动解决方案，它能够处理各种复杂的滚动场景，如无滚动条的滚动效果。在本文中，我们将深入探讨如何在Vue项目中使用Better Scroll，并通过具体的代码...

vue和echart结合的文字云组件

08-10

在Vue组件的`mounted`方法中，我们需要获取到用于显示ECharts的元素，通常是通过`ref`属性定义的DOM元素。例如，我们可以这样定义模板： ```html <div ref="wordcloud"></div> ``` 然后在`mounted`方法中初始化...

【JavaScript源代码】vue实现页面添加水印效果.docx

12-29

在 Vue 应用中实现页面添加水印效果，可以增强页面的版权保护或者增加品牌标识。在提供的文档中，我们看到一个名为 `watermark` 的函数，它负责在页面上动态生成水印。下面将详细解析这个功能的实现方式和涉及的知识...

animais-fantasticos：使用DOM以及.window和.element的研究

02-20

它包含了与页面交互的所有属性和方法，如`.window.location`用于获取或设置当前页面的URL，`.window.alert()`用于显示警告对话框，`.window.scrollTo()`可以用来滚动页面到指定位置。理解`.window`对象对于编写交互...

vue中记录滚动条位置

老余的博客

11-02

5511

但是有个缺点，页面刷新后就不记录了，但是简单高效。在点击的时候记录滚动条位置，存入本地。, 使用缓存机制来记录滚动条位置。再次进入该路由读取滚动跳位置。

Vue滚动到指定位置的多种方式

热门推荐

qsya的博客

07-13

4万+

需求：当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。方法一：锚点锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for

【VUE中实现锚点的平滑滚动 + VUE 全屏滚动】

weixin_44270428的博客

07-30

1577

目录 A.锚点的平滑滚动-------------------------------- 1.效果 2.最外层：layout组件 3.头部导航：Header组件 4.关键部分： 2. 全屏滚动 1.安装 2.main.js中引入 3.HTML结构需求：点击TAB,可以实现板块的快速定位，平滑滚动，起初思路把买个TAB对应的页面当成单独的页面，所以方向错了，成了不同页面间的跳转，其实应该是一个页面中有不同的组件，每个组件占一屏，点击TAB锚点定位 A.锚点的平滑滚动------..

js移动端触摸事件

weixin_45842954的博客

01-02

370

touchstart : 手指触摸dom元素事件 tochmove ：手指拖动dom元素事件 touchend :手指离开dom元素事件事件对象重要的三个触摸列表 touches 触摸屏幕上所有触摸点(手指)的列表 targetTouches dom元素上所有触摸点的列表 changeTouches 手指状态发生了改变，从无到有，从有到无的变化例子：移动盒子 <script> window.addEventListener('load',function(){ .

Vue实现DOM元素拖放互换位置

觉醒法师的专栏

01-18

5515

HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个元素为例展示了这些工作是如何完成的。一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。

vue 滚动dom到指定位置

weixin_45979310的博客

04-05

545

使用原生dom方法，滚动到指定视野。

vue 双向锚点实现简易版（scrollIntoView）

lemon今天学习了吗？的博客

11-11

5121

一. 需求：左边是内容板块，右边是目录结构，点击右边内容跳转到左边相应位置展示，滑动左边内容右边目录自动跳转。

vue3监听滚动事件固定元素位置

xt190224的博客

01-25

1470

2.获取元素滚动高度，设置固定样式。可以啦，撒花撒花❀ ❀❀。

vue实现点击按钮滚动页面到指定位置

09-03

在Vue中实现点击按钮滚动页面到指定位置，可以通过以下步骤实现： 1. 首先，在你的Vue组件中，给按钮绑定一个点击事件。可以使用`@click`指令或者`v-on:click`来实现。例如： ```html <button @click="scrollToSection">滚动到指定位置</button> ``` 2. 在Vue组件的`methods`中定义`scrollToSection`方法，用来处理按钮点击事件。在该方法中，可以使用原生的JavaScript代码来实现滚动效果。例如： ```javascript methods: { scrollToSection() { // 获取目标元素 const targetElement = document.getElementById('target-section'); // 使用scrollIntoView方法进行滚动 targetElement.scrollIntoView({ behavior: 'smooth' }); } } ``` 3. 在你的页面上添加一个具有唯一标识的目标元素，该元素就是滚动到的位置。例如： ```html <section id="target-section">  </section> ``` 这样，当按钮被点击时，页面就会平滑地滚动到指定的位置。请注意，以上代码只是一个示例，具体实现方式可能根据你的项目结构和需求而有所不同。