How will the page scroll to the next section if the arrow is clicked?

April 8, 2022

I want that when I click on the arrow, the website will scroll down to the next section, called rest in my code. So it will move 100vh. I don’t know how I must do this, I think there must be some JS in it. Does anyone know how I can get what I want? See image below, so it will be clear. Thanks in advance!

HTML:

<html>
    <head>
        <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
        <title>Korps Commandotroepen</title>
        <link rel="stylesheet" href="style5.css">
    </head>
    <body>
        <div class="bg">
            <button class="button">
                <div class="button__arrow button__arrow--down"></div>
            </button>
        </div>
        <div class="rest">

        </div>
    </body>
</html>

CSS:

.bg{
    width: 100%;
    height: 100vh;
    background-color: black;
}
.button {
    border-radius: 20px;
    padding: 8px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: fixed; 
    bottom:8%;
}
.button__arrow {
    background-color: transparent;
    height: 12px;
    width: 12px;
}
.button__arrow--down {
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    border-right: 3px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
}
.rest{
    width: 100%;
    height: 100vh;
    background-color: aliceblue;
}

Image:

>Solution :

I think you can do it by simply putting arrow in tag and in href give the id of rest. UPVOTE if found useful!!

  
CSS:

.bg{
    width: 100%;
    height: 100vh;
    background-color: black;
}
.button {
    border-radius: 20px;
    padding: 8px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: fixed; 
    bottom:8%;
}
.button__arrow {
    background-color: transparent;
    height: 12px;
    width: 12px;
}
.button__arrow--down {
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    border-right: 3px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
}
.rest{
    width: 100%;
    height: 100vh;
    background-color: aliceblue;
}

<html>

<head>
  <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
  <title>Korps Commandotroepen</title>
  <link rel="stylesheet" href="style5.css">
</head>

<body>
  <div class="bg">
    <button class="button">
                <a href="#rest"><div class="button__arrow button__arrow--down"></div></a>
            </button>
  </div>
  <div class="rest" id="rest">

  </div>
</body>

</html>

<!-- begin snippet: js hide: false console: true babel: false -->