网页锚点功能实现<a>标签和scrollIntoView()方法

2023-10-28 20:20

本文主要是介绍网页锚点功能实现<a>标签和scrollIntoView()方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一:<a>标签实现锚点

   <a> 标签是 HTML 中用于创建超链接的元素,常用于跳转到其他页面或当前页面的某个位置。

        在 <a> 标签中使用锚点,可以让用户点击链接后跳转到页面中的某个特定位置,而不是跳转到整个页面的顶部。锚点使用 # 符号加上对应的元素 ID 来定义,在 <a> 标签的 href 属性中指定。例如,要创建一个跳转到 ID 为 mysection 的元素的锚点链接,可以这样写:

<a href="#mysection">Jump to my section</a>

        可以在任何元素上添加一个 ID,使其成为一个可以被锚点链接的目标位置。例如,要在一个段落中添加一个锚点,可以这样写:

<p id="mysection">This is my section</p>

        当用户点击带有锚点的链接时,页面会滚动到目标元素的位置,并将该元素置于视口的顶部或底部,具体取决于浏览器、操作系统和用户的首选项。

二:<a>标签锚点会改变页面的 url        

当页面中出现类似 <a href="#mysection">link</a> 的锚点链接时,点击这个链接会在当前页面中跳转到包含 ID 为 somehash 的元素位置。在此过程中,URL 的 hash 部分会被改变。

        当点击这个按钮时,URL 的 hash 部分会从原来的值改变为 #newhash,页面路由发生变化,如果你自己的项目阻止了错误路由并重定向到404页面,那么会跳转至404页面,那么,如何来解决这个问题呢?

三:解决<a>标签锚点功能点击之后改变 url 问题        

解决办法:使用了 scrollIntoView(true)方法

        scrollIntoView(true)是一个JavaScript方法,可用于滚动页面中的元素到可见区域。该方法可将当前元素滚动到可见视图的顶部或底部。

        需要注意的是,该方法只能作用于DOM元素。调用scrollIntoView(true)时,浏览器会尝试将该元素滚动到顶部,使其位于可视区域内。如果将参数设置为false,则该元素会滚动到底部。

例如,以下代码将滚动页面中的ID为"example"的元素到顶部:

document.getElementById("mySection").scrollIntoView(true);

        因此我们可以通过获取标签dom元素(可以使用除<a>标签之外的任意标签),添加点击事件,使用scrollIntoView(true)来实现a标签的锚点功能,这个方法可以完美的替代<a>标签的锚点。

<span onclick=handleSpanClick>点击跳转到div</span>
<div id = 'mySection'></id>

const handleSpanClick = ()=> {document.querySelector('#mySection').scrollIntoView(true);};

四:下面是scrollIntoView(true)方法在React函数组件中的示例

        在React函数组件中,可以使用Refs来引用特定的DOM元素,然后使用scrollIntoView(true)方法来将该元素滚动到可见视图的顶部。

        以下是一个使用Refs实现锚点功能的示例代码:

import React, { useRef } from "react";function AnchorScroll({ id, children }) {const ref = useRef(null);const handleClick = () => {ref.current.scrollIntoView(true);};return (<><div onClick={handleClick}>{children}</div><div ref={ref} id={id} /></>);
}export default AnchorScroll;

        在上面的代码中,我们创建了一个AnchorScroll函数组件,它接受id和children作为属性。对于每个AnchorScroll组件,我们创建了一个Refs,该Refs将与具有相同id属性值的DOM元素相关联。然后,我们在组件的返回中包含两个div元素,其中一个用于触发点击事件,另一个具有与Refs相关联的id属性。当用户点击包含文字的div元素时,将调用handleClick函数。handleClick函数将Refs上的scrollIntoView(true)方法调用来滚动到具有相应id属性的DOM元素。

        在使用AnchorScroll组件时,只需要传递id和子元素即可:

import React from "react";
import AnchorScroll from "./AnchorScroll";function App() {return (<><AnchorScroll id="section1">Section 1</AnchorScroll><div>...</div><AnchorScroll id="section2">Section 2</AnchorScroll><div>...</div><AnchorScroll id="section3">Section 3</AnchorScroll><div>...</div></>);
}export default App;

        在上面的代码中,我们使用三个AnchorScroll组件,每个组件都有一个唯一的id。当用户点击每个AnchorScroll组件时,页面将滚动到具有相应id属性的DOM元素。


五:scrollIntoView实现平滑滚动

注意:这个滚动是非常生硬的,如果我们想要实现实现平滑滚动,可以使用CSS的scroll-behavior属性。将scroll-behavior属性设置为smooth,可以使滚动变为平滑的。具体做法是,在滚动到DOM元素时,先将该元素的父元素的scroll-behavior属性设置为smooth,然后再将该元素的scrollIntoView方法调用。

这篇关于网页锚点功能实现<a>标签和scrollIntoView()方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/295696

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口