Search code examples
javascriptcssscrollnavigationscrollbar

How to jump to exact point within a website?

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?

Solution

  • 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

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

    Step #2 - Create a link

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

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

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