网页锚点功能实现＜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方法调用。