100vhずつスクロールされるスクロールボタンを実装したい

前提・実現したいこと

100vhずつ下にスクロールされるスクロールボタンを実装したいです。

該当のソースコード

html
1<div class="index_page" id="scroll">
2
3 <button id="scroll_btn">
4    <img src="../img/common/scroll_icon.svg" alt="scroll">
5 </button>
6
7 <section>
8  hogehogehoge
9 </section>
10
11 <section>
12  hogehogehoge
13 </section>
14
15 <section>
16  hogehogehoge
17 </section>
18
19</div>

javascript
1window.onload = init;
2function init() {
3
4  var element = document.getElementById('scroll');
5  var btn = document.getElementById('scroll_btn');
6
7  btn.onclick = function () {
8    element.scrollTop += 50;
9  };
10
11};

scss
1#scroll_btn{
2    position: fixed;
3    left: 50%;
4    transform: translateX(-50%);
5    bottom: 5%;
6    z-index: 999;
7    img{
8      width: 7rem;
9      height: 7rem;
10    }
11  }
12
13section{
14 height:100vh;
15}

試したこと

下記サイトを参考に上記のように実装したのですが、
ボタンをクリックしても、動かず。。。

上記で動いたとしても、50pxずつかと思うので、
100vhずつの場合はどのように記載すれば良いのかも
なかなか答えが見つからず困っております。

参考サイト

有識者の方がいらっしゃいましたら、教えていただけますと
大変助かります。どうぞよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

作成してみました。おそらくこれで大丈夫かと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>homePage</title>
7  <style>
8    body {
9      width: 100%;
10      height: 500vh;
11      margin: 0;
12      overflow-x: hidden;
13      position: relative;
14    }
15
16    .bg {
17      width: 100vw;
18      height: 100vh;
19    }
20
21    ._01 {
22      background-color: red
23    }
24
25    ._02 {
26      background-color: cyan;
27    }
28
29    ._03 {
30      background-color: darkblue;
31    }
32
33    ._04 {
34      background-color: green
35    }
36
37    ._05 {
38      background-color: hotpink
39    }
40
41    .button01,
42    .button02,
43    .button03,
44    .button04,
45    .button05 {
46      position: fixed;
47      top: 0;
48      display: block;
49      width: 200px;
50      height: 100px;
51      font-size: 2em;
52    }
53
54    .button02 {
55      left: 210px;
56    }
57
58    .button03 {
59      left: 420px;
60    }
61
62    .button04 {
63      left: 630px;
64    }
65
66    .button05 {
67      left: 840px;
68    }
69  </style>
70</head>
71
72<body>
73  <div class="bg _01"></div>
74  <div class="bg _02"></div>
75  <div class="bg _03"></div>
76  <div class="bg _04"></div>
77  <div class="bg _05"></div>
78  <button id="button01" type="button" class="button01">1番上</button>
79  <button id="button02" type="button" class="button02">2番目</button>
80  <button id="button03" type="button" class="button03">3番目</button>
81  <button id="button04" type="button" class="button04">4番目</button>
82  <button id="button05" type="button" class="button05">5番目</button>
83  <script>
84
85    const scrollBtn = () => {
86      for (let i = 0; i < 5; i++) {
87        const bg = document.getElementsByClassName("bg");
88        const btn = document.getElementsByTagName("button");
89        btn[i].addEventListener("click", () => {
90          bg[i].scrollIntoView(true)
91        });
92      }
93    }
94
95    scrollBtn();
96
97  </script>
98</body>
99
100</html>