如何跳到网站中的确切点？

Question

例如，

• 此屏幕截图来自：
• 以及 /a>来自： https://www.digitale-nomaden.ch/

我对编码和DON非常新``知道谷歌要找到有关此教程的任何教程，谁能告诉我这种“ scrollbar”被称为什么？

这些滚动条是如何制作的？它是否类似于垂直和没有文本的Nav-Bar，还是有其他方法可以实现这一目标？

Answer 1

这被称为＃）作为超链接HREF。

来使用的。

步骤＃1-

为要滚动的元素添加ID，给它一个唯一的 id 属性

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

步骤＃2-创建一个链接

添加 href 到您想触发滚动操作

<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>