如何跳转到网站内的准确点?

Question

例如

• 这个截图来自:https://www.washingtonpost.com/graphics/world/border-barriers/global-illegal-immigration-prevention/
• 还有这个截图来自:https://www.digitale-nomaden.ch/

我对编码很陌生，不知道在谷歌上找什么教程，有人能告诉我这种类型的滚动条吗?是叫什么?

这些滚动条是如何制作的?它是否类似于一个导航栏只是垂直和没有文本或有不同的方法来实现这一点?

Answer 1

这被称为片段锚。它是通过指定元素的ID前面加一个散列(#)作为超链接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>