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

标签 css html scroll hyperlink

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

有了 id,它看起来像这样:href=#id。首先放置 #,这是 id 选择器,然后是 id。

这对 id 非常有效,因为页面上只有一个。但是一个类通常有多个实例,因此在 javascript 中要指定一个类,您需要执行 class[index]。

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

这显然行不通(我为什么还要问社区),所以简而言之,我要问的是:如何在只有一个类作为选择器的网页中获取链接。

最佳答案

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

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

但是,使用 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>

关于css - 使用类链接到网页上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48778695/

相关文章:

html - 填充 flex 布局不能不破坏宽度列吗?

javascript - 浏览网站时,网站的一部分如何保持显示(有点像只加载一次)?

javascript - 如何将 css 属性添加到 Canvas

javascript - 一键两个功能 - 计算和提交表单

html - CSS div 跨度位置文本重叠

java - 执行脚本后从 Java 中提取 HTML

ios - 如何在 "touching"嵌入 iframe 时禁用滚动?

CSS 选择器 : Style element left or right from text

java - 如何创建圆形水平 ScrollView

c++ - gtkmm textview epands 而不是滚动