How to jump to exact point within a website?

Question

For example,

I'm very new to coding and don't know what to google to find any tutorials on this, can anyone tell me what this type of "scrollbar" is called?

And how are these scrollbars made? Is it similar to a nav-bar just vertically and without text or is there a different method to achieve this?

user_979052 · Answer

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

Step #1 - Add ID

For the element you'd like to scroll to, give it a unique id attribute

Step #2 - Create a link

Add the href to the link that you'd like to trigger the scroll action

Step #3 - Make it Smooth (optional)

Using CSS, you can animate this for a more natural effect, using the scroll-behavior property. For example:

html {
  scroll-behavior: smooth;
}

Alternative

It's also possible to achieve the same thing with JavaScript. For example:

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

Example

Based on the examples in your screenshot, here's a quick demo:

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