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

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 >
            <button >
                <div ></div>
            </button>
        </div>
        <div >

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

CodePudding user response：

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

  
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 >
    <button >
                <a href="#rest"><div ></div></a>
            </button>
  </div>
  <div  id="rest">

  </div>
</body>

</html>

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

CodePudding user response：

Simple approach using scroll-behavior: smooth; and a tag instead of button.

window.onscroll = function () {
    var height = $(window).height();
    var scrollTop = $(window).scrollTop();
    var obj = $('#scroll');
    var pos = obj.position();
    if (height   scrollTop < pos.top) {
       $('.button').fadeIn();
    }
    else {
       $('.button').fadeOut(); 
    }
}

html {
  scroll-behavior: smooth;
}

.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%;
  background: #ccc;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 >
    <a href="#scroll" >
      <div ></div>
    </a>
  </div>
  <div id="scroll" ></div>
</body>

</html>

CodePudding user response：

   <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 >
    <button >
        <div  id="button__arrow         
button__arrow--down" onClick="topFunction()"></div>
    </button>
</div>
    <div >

    </div>
 <script>

var mybutton = document.getElementById("button__arrow button__arrow-- 
down");

var close = document.getElementsByClassName("button")[0];

function topFunction() {
document.body.scrollTop = 1000;
document.documentElement.scrollTop = 1000;
}
var close = document.getElementsByClassName("button")[0];
close.onclick = function() {
  close .style.display = "none";
}
</script>
<style>
.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;
}
</style>
</body>
</html>

CodePudding user response：

see this https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

window.scrollBy(0, window.innerHeight);