如何跳转到网站内的确切位置？

Question

例如，

This screenshot 来自： https://www.washingtonpost.com/graphics/world/border-barriers/global-illegal-immigration-prevention/
还有 this screenshot 来自： https://www.digitale-nomaden.ch/

我是编码的新手，不知道如何google 找到任何这方面的教程，谁能告诉我这种“滚动条”叫什么？

这些滚动条是如何制作的？它是否类似于垂直导航栏且没有文本，或者是否有不同的方法来实现此目的？

当然，如果您知道一个好的教程，link 也非常感谢 :)。

Answer 1

This is called a Fragment Anchor. It is used by specifying the element's ID preceded by a hash (#) as the hyperlinks href.

第 1 步 - 添加 ID

对于您要滚动到的元素，为其指定一个唯一的 id 属性

<div id="zutto-hachi"></div>

步骤 #2 - 创建 link

将 href 添加到您想要触发滚动操作的 link

<a href="#zutto-hachi"></a>

第 3 步 - 使其平滑（可选）

使用 CSS，您可以使用 scroll-behavior 属性为其设置动画以获得更自然的效果。例如：

html {
  scroll-behavior: smooth;
}

备选

也可以用 JavaScript 达到同样的效果。例如：

document.getElementById("zutto-hachi").scrollTo({ behavior: "smooth", top: 0 });

例子

根据您屏幕截图中的示例，这里有一个快速演示：

nav {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: flex;
  flex-direction: column;
  height: 10rem;
  justify-content: space-around;
  background: #dcdcdc;
  border-radius: 4px;
}
nav a {
  font-family: monospace;
  display: inline-block;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 12px;
  text-align: center;
  padding: 0.25rem;
  width: 1rem;
  color: #fff;
}
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.scroll-container {
  width: 80%;
  height: 12rem;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
  color: #dcdcdc;
  font-family: monospace;
}


.scroll-page#page-1, nav a:nth-child(1) { background: #9b5de5; }
.scroll-page#page-2, nav a:nth-child(2) { background: #f15bb5; }
.scroll-page#page-3, nav a:nth-child(3) { background: #fee440; }
.scroll-page#page-4, nav a:nth-child(4) { background: #00bbf9; }
.scroll-page#page-5, nav a:nth-child(5) { background: #00f5d4; }

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
  <a href="#page-4">4</a>
  <a href="#page-5">5</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
  <div class="scroll-page" id="page-4">4</div>
  <div class="scroll-page" id="page-5">5</div>
</div>

如何跳转到网站内的确切位置？

How to jump to exact point within a website?

javascript

css

navigation

scroll

scrollbar

第 1 步 - 添加 ID

步骤 #2 - 创建 link

第 3 步 - 使其平滑（可选）

备选

例子