如何使标题可点击？ [复制]答案

【问题标题】：How to make header clickable? [duplicate]如何使标题可点击？ [复制]
【发布时间】：2021-11-25 15:24:24
【问题描述】：

我想在我的网站上拥有这样的功能，如果我点击标题中的顶部栏导航元素之一，我想进入网站的这个部分。例如，如果我单击此处“如何”：

我想登陆这里：

我该怎么做？

【问题讨论】：

我很确定这与Link to a section of a webpage 或Linking to a specific part of a web page（可能还有更多）重复，如果不是，请解释原因。

标签： javascript html css

【解决方案1】：

如果在同一页面上，请查看making headings link targets。前提是导航中的a 标签指向标题标签上的id，例如

<a href="#about-us">...</a>

<!-- will take you to: -->

<h2 id="about-us">About us</h2>

【讨论】：

在回答问题之前，您应该检查它是否已经在 SO 上得到回答。如果您的答案与那些相比不包含任何新信息，您应该留下指向该答案的评论，而不是写一个内容基本相同的新答案。（或者一旦你有足够的声誉就投票关闭它）

【解决方案2】：

要获得流畅的滚动体验而不是跳转到锚点，您可以通过在标题上使用 eventListener 来实现此目的。然后使用 how 元素的getBoundingClientRect() 来获取它在页面上的位置。
然后您可以将窗口对象滚动到元素的位置。

let header = document.getElementById('hacker-header');
let how = document.getElementById('how');
header.addEventListener('click', () => {
  window.scrollTo({
    top: how.getBoundingClientRect().y,
    left: how.getBoundingClientRect().x,
    behavior: 'smooth'
  });
});

body {
background: black;
}
h1 {
 color:lime;
}
#high {
   height: 5000px;
   width:200px;
   background: linear-gradient(180deg, rgba(112,135,95,1) 0%, rgba(21,55,31,1) 35%, rgba(7,121,5,1) 100%);
}

<header id="hacker-header">
<h1>Hacker</h1>
</header>
<div id="high">
</div>
<footer id="how">
<h1>How</h1>
</footer>

【讨论】：

如果可以使用 scroll-behavior: smooth; 来获得流畅的滚动体验，为什么还要使用 JavaScript？