Vue锚链接(两种方法) scrollIntoView

article/2025/10/24 21:38:14
第一种:常见 锚链接,idhref 结合起来
<div id="one" style="height: 300px;">第一</div>
<div id="two" style="height: 300px;">第二</div><a href='#one'>回到第一</a>
<a href='#two'>回到第二</a>

在vue项目中可能会导致第一次点击没有效果,第二次点击才跳到对应位置,
因为在 router中设置了 scrollBehavior: () => ({ y: 0 }),导致的,但是我们需要路由跳转时滚动条回到初始位置,所以这里可以用另一种方法:即第二种
在这里插入图片描述

第二种:element.scrollIntoView() 实现 锚链接
<div id="one" style="height: 300px;">第一</div>
<div id="two" style="height: 300px;">第二</div><h2 @click="handleScroll('one')">回到第一</h2>
<h2 @click="handleScroll('two')">回到第二</h2>
methods: {handleScroll(id) {var element = document.getElementById(id);element.scrollIntoView(); // 参数 false 代表 Bottom}
}

页面滚动到顶部

document.documentElement.scrollTop = 0;

http://chatgpt.dhexx.cn/article/6ssSLWIn.shtml

相关文章

Html的锚点链接

HTML中的链接&#xff0c;正确的说法应该称作"锚点"&#xff0c;它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页&#xff0c;通过点击命名锚点&#xff0c;不仅让我们能指向文档&#xff0c;还能指向页面里的特定段落&#xff0c;更能当作"精准链…

页面中的锚链接

1、锚链接 方法一 // 设置锚点链接 <a href"#miao">锚点链接</a> // 锚点 <a namemiao>锚点</a>注&#xff1a;name的属性值和锚链接的href中名一样 方法二 // 设置锚点链接 <a href"#miao">锚点链接</a> // 锚…

HTML链接(锚)

锚 使用<a>标记 有两种使用 <a> 标签的方式&#xff1a; 通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签 这样说有点抽象&#xff0c;还是在几种实际应用中理解创建链接和创建书签的含义吧&#xff01; 实现网页之间跳…

HTML超链接、锚链接

超链接和锚链接的区别&#xff0c;就是超链接需要跳砖页面&#xff1b;锚链接不需要&#xff0c;在同一页面中跳转到某个位置。 不管是超链接&#xff0c;还是锚链接&#xff0c;都是用a元素。 超链接&#xff1a;超链接的使用就是在href中加入网址&#xff0c;如果是图片超链…

超链接 锚链接 功能性链接 块元素 行内元素

目录 超链接标签 页面间的锚链接 不同页面中的锚链接 功能性链接 行内元素和块元素 超链接标签 超链接的基本应用: 超链接包含两部分内容:1.是链接地址,可以是某个网址或文件的路径,对应为<a>标签的href属性 2. 是链接文本或图像,单击该文本或图像,将跳转到href属…

HDFS原理简图汇总

HDFS原理简图汇总 1.HDFS结构简图 2.namenode和datanode心跳机制 3.namenode元数据更新的checkpoint机制 4.hdfs写数据机制 5.hdfs读数据机制 一图胜千言&#xff0c;把文字转为图形确实可以更进一步对知识做提炼&#xff0c;如有错漏&#xff0c;欢迎大家留言指正。

Hadoop HDFS原理笔记

1&#xff1a;Hadoop家族 2&#xff1a;Hadoop的两大核心 3&#xff1a;HDFS介绍 4&#xff1a;HDFS结构 5&#xff1a;HDFS架构图 6&#xff1a;HDFS的数据存储单元&#xff08;Block&#xff09; 7&#xff1a;HDFS设计思想 8&#xff1a;NameNode&#xff08;NN&#xff0…

HDFS高级-架构原理

文章目录 1 HDFS架构剖析1.1 集群角色介绍1.2 HDFS重要特性 2 HDFS Web Interfaces2.1 模块功能解读OverviewdatanodesDatanode Volume FailuresSnapshotSatartup progressUtilitiesBrowse the file systemLogs、Log LevelConfigruation 3 HDFS读写流程3.1 HDFS写数据流程&…

(转载)深入分析HDFS原理及读写流程

一、架构体系 1.1、什么是HDFS&#xff1f; HDFS即Hadoop Distributed File System的简称&#xff0c;采用Master/Slave主从结构模型来管理数据。在设计上采用了分而治之的思想&#xff0c;将单服务器无法承受的大量的数据分布在多台服务器上。HDFS主要由Client、NameNode、Dat…

Hadoop分布式文件系统HDFS原理以及操作(一)

HDFS简介&#xff1a;活动在集群上并支持以流式数据访问模式来存取超大文件。存储设计是把海量数据部 署在价格低廉的节点上&#xff0c;具有高容错性和高吞吐量特性。HDFS的设计首要是针对超大文件存储&#xff0c;而对于小的文件访问和存储速度反而会降低。 HDFS体系结构&am…

【hadoop】HDFS原理 和 重要特性

文章目录 一、NameNode 概述二、DataNode 概述三、HDFS的工作机制三、HDFS 写数据流程四、HDFS 读数据流程五、HDFS重要特性1&#xff0e; master/slave 架构2&#xff0e; 分块存储3&#xff0e; 名字空间&#xff08;NameSpace &#xff09;4&#xff0e; Namenode 元数据管理…

HDFS原理解析

HDFS原理解析 一、HDFS简介 HDFS为了做到可靠性&#xff08;reliability&#xff09;创建了多分数据块&#xff08;data blocks&#xff09;的复制&#xff08;replicas&#xff09;&#xff0c;并将它们放置在服务器群的计算节点中&#xff08;computer nodes&#xff09;&…

HDFS原理与应用

1 HDFS基本介绍 一些基本概念&#xff1a; 在Hadoop中&#xff0c;HDFS是存储层&#xff0c;YARN是调度层&#xff0c;MapReduce是应用层 HDFS是Hadoop分布式文件系统&#xff08;Hadoop Distributed File System&#xff09; 分布式文件系统有大容量、高可靠和低成本的特点…

大数据_HDFS原理

目录 一、什么是HDFS 二、HDFS架构角色 三、HDFS工作流程 四、HDFS的优缺点 一、什么是HDFS 1、定义 HDFS即Hadoop分布式文件系统&#xff08;Hadoop Distributed Filesystem&#xff09;&#xff0c;以流式数据访问模式来存储超大文件&#xff0c;它和现有的分布式文件系…

Hadoop HDFS原理

一、HDFS介绍 HDFS 包括 块、NameNode、DataNode&#xff0c;适用于一次写多次读&#xff0c;不支持并发写。具有通透性、容错性。 HDFS中文件被分成块进行存储&#xff0c;其块默认大小为64M&#xff0c;块是文件存储处理的逻辑单元。用户通过网络访问文件。 NameNode 为管理节…

HDFS原理(超详解)

简介 HDFS&#xff08;Hadoop Distributed File System &#xff09;Hadoop 分布式文件系统。是根据 google 发 表的论文翻版的。论文为 GFS&#xff08;Google File System&#xff09;Google 文件系统。 HDFS 有很多特点&#xff1a; ① 保存多个副本&#xff0c;且提供容…

hdfs原理详解

hdfs概述 namenode 管理了整个文件系统的元数据 &#xff08;metadata&#xff09; 管理众多datanode 对外提供服务的唯一入口 rpc端口&#xff1a;9000 使用文件系统的端口 hdfs://node-1:9000 http端口&#xff1a;50070 hdfs webui页面的端口 查看端口 http://node-1:50070d…

深入分析HDFS原理及读写流程

本文目录 一、架构体系1.1、什么是HDFS&#xff1f;1.2、组成HDFS的各模块作用1.2.1、Client1.2.2、NameNode1.2.3、DataNode1.2.4、SecondaryNameNode 二、数据读写2.1、读数据2.2、写数据 三、优缺点 一、架构体系 1.1、什么是HDFS&#xff1f; HDFS即Hadoop Distributed F…

HDFS原理与实操

文章目录 1 概述1.1 HDFS的优缺点1.2 HDFS组成架构 2 HDFS 读写流程2.1 写数据流程2.2 读数据流程 3 NameNode和SecondaryNameNode原理4 DataNode原理5 HDFS生产调优5.1 HDFS核心参数配置5.2 HDFS集群压测5.3 HDFS白名单与黑名单5.4 HDFS集群扩容及缩容5.5 HDFS存储优化5.6 HDF…

HDFS 原理 详解

前言 一、HDFS的设计原理 二、什么是零拷贝 三、什么是DMA 四、HDFS 架构剖析 HDFS 架构整体概述 HDFS 架构图 五、HDFS 集群角色介绍 1.主角色: namenode 2 从角色:datanode 3 主角色辅助角色: secondarynamenode 六、HDFS重要特性--主从架构 七、HDFS重要特性--分块…