使用类链接到网页上的位置

Question

我知道我可以使用 ID 链接到网页上的位置。但是我可以使用类来做到这一点吗？

有了 id，它看起来像这样：href=#id。首先输入 #，它是 id 选择器，然后是 id。

这对于 id 来说效果非常好，因为一页上只有一个。但一个类通常有多个实例，因此在 javascript 中要指定单个实例，可以使用 class[index].

考虑到这一点，我假设要链接到类，我会这样做：href=.class[index]。是.类选择器，[index] 是指定我指向哪个类。

这显然行不通（否则我为什么要问社区），所以简而言之，我要问的是：如何在只有一个类作为选择器的网页中获取链接。

Answer 1

你所要求的根本无法完成。

ID 和类之间的区别在于 ID必须是唯一的，而类则不需要。因此，“跳转链接”无法知道您要跳转到哪个元素。虽然简单地跳转到当前的第一级可能是有意义的，但这不是跳转链接的运作方式。

然而，使用 JavaScript 的方法可以实现相同的功能.scrollTo()：

document.getElementsByClassName("top")[0].addEventListener("click", function(){
    window.scrollTo(0, document.querySelector(".bottom").offsetTop);
});

.bottom {
  margin-top: 500px;
}

<div class="top">Top - Click Me!</div>
<div class="bottom">Bottom</div>