JSのスムーススクロールについてご教授ください

JSの初心者です。
1日に何度も質問してしまっていますが、すみません。
下記のコードをスムーススクロールのコードとして記述したのですが、
ページトップには行くのですが、スムーススクロールになりません。
エラー等は一切出ておらず、「window.setTimeout(scrollToTop, 50);」で
うまく動作してくれると思っているたのですが、この記述ではできないのでしょうか？
「スムーススクロール　js」などで調べてもいいものが見つからず、
どなたか教えていただけませんでしょうか・・・？

宜しくお願いいたします！

//スクロール量を取得する関数
     const getScrolled = () =>{
         return (window.pageYOffset !== undefined)? window.pageYOffset: document.documentElement.scrollTop;
    };

    //トップへ戻るボタンの要素を取得
    const pageTop = document.getElementById('pageTop');

    //ボタンの表示と非表示
    window.onscroll　= () =>{
        if (getScrolled() > 500){
            pageTop.classList.add('is-fadeIn');
        }else{
            pageTop.classList.remove('is-fadeIn');
        }
    };

    //トップへ移動する関数
    const scrollToTop = ()=>{
        window.scrollTo(0, Math.floor(getScrolled / 2));
        if(getScrolled > 0){
            window.setTimeout(scrollToTop, 50);
        }
    };

    //イベント登録
    pageTop.onclick = ()=>{
    scrollToTop();
    };

m.ts10806

2020/07/25 08:32

html,cssをご提示ください。また「初心者です」と書くのではなく初心者アイコンをつけてください

Lhankor_Mhy

2020/07/27 03:19

scroll-behavior などのCSSではダメ、ということですよね？ https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

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

回答1件

別の質問の回答に使ったコードです。
開いたところにあるボタンを押すとそれぞれの要素にスクロールするようにできています。
参考までにどうぞ。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <title>test</title>
6    <style>
7        body {
8            margin: 0;
9        }
10
11        .nav {
12            position: fixed;
13            right: -320px;
14            top: 0;
15            width: 300px;
16            height: 100vh;
17            padding-top: 40px;
18            background-color: #fff;
19            transition: all .6s;
20            z-index: 200;
21            overflow-y: auto;
22        }
23
24        .start {
25            animation: anime 0.3s forwards;
26        }
27
28        @keyframes anime {
29            0% {
30                right: -320px;
31            }
32
33            10% {
34                right: -288px;
35            }
36
37            20% {
38                right: -256px;
39            }
40
41            30% {
42                right: -224px;
43            }
44
45            40% {
46                right: -192px;
47            }
48
49            50% {
50                right: -160px;
51            }
52
53            60% {
54                right: -128px;
55            }
56
57            70% {
58                right: -96px
59            }
60
61            80% {
62                right: -64px
63            }
64
65            90% {
66                right: -32px;
67            }
68
69            100% {
70                right: 0
71            }
72
73        }
74
75        .hamburger {
76            position: fixed;
77            cursor: pointer;
78            z-index: 300;
79            background-color: rgba(0, 0, 0, 0.5);
80            color: white;
81            padding: 0;
82            outline: none;
83            border: none;
84            display: inline-block;
85            right: 30px;
86            top: 20px;
87            width: 50px;
88            height: 50px;
89            font-size: 50px;
90            line-height: 55px;
91        }
92
93        .nav-list {
94            margin: 0;
95            padding: 0;
96            list-style: none;
97        }
98
99        .nav-item {
100            text-align: center;
101            padding: 0 14px;
102        }
103
104        .nav-item a {
105            display: block;
106            padding: 8px 0;
107            border-bottom: 1px solid #eee;
108            text-decoration: none;
109            color: #111;
110        }
111
112        .nav-item a:hover {
113            background-color: #eee;
114        }
115
116        .close {
117            position: fixed;
118            left: 0;
119            top: 0;
120            width: 100vw;
121            height: 100vh;
122            z-index: 100;
123            background-color: #000;
124            opacity: 0;
125            visibility: hidden;
126            transition: all .6s;
127            cursor: pointer;
128        }
129
130        .nav-open .global-nav {
131            right: 0;
132        }
133
134        .nav-open .close {
135            opacity: .8;
136            visibility: visible;
137        }
138
139        .nav-open .hamburger__line--1 {
140            transform: rotate(45deg);
141            top: 20px;
142        }
143
144        .nav-open .hamburger__line--2 {
145            width: 0;
146            left: 50%;
147        }
148
149        .nav-open .hamburger__line--3 {
150            transform: rotate(-45deg);
151            top: 20px;
152        }
153
154        .page01 {
155            text-align: center;
156            width: 100%;
157            height: 100vh;
158            background-position: center;
159            background-repeat: no-repeat;
160            background-color: rgba(230, 20, 20, 0.5);
161            position: relative;
162        }
163
164        .page01 div {
165            width: 60vw;
166            height: 40vw;
167            background-color: rgba(20, 20, 230, 0.5);
168            position: absolute;
169            top: 50%;
170            left: 50%;
171            transform: translate(-50%, -50%);
172        }
173
174        .page02 {
175            text-align: center;
176            width: 100%;
177            height: 100vh;
178            background-position: center;
179            background-repeat: no-repeat;
180            background-color: rgba(20, 20, 230, 0.5);
181            position: relative;
182        }
183
184        .page02 div {
185            width: 60vw;
186            height: 40vw;
187            background-color: rgba(230, 20, 20, 0.5);
188            position: absolute;
189            top: 50%;
190            left: 50%;
191            transform: translate(-50%, -50%);
192        }
193
194        .page03 {
195            text-align: center;
196            width: 100%;
197            height: 100vh;
198            background-position: center;
199            background-repeat: no-repeat;
200            background-color: rgba(20, 230, 20, 0.5);
201            position: relative;
202        }
203
204        .page03 div {
205            width: 60vw;
206            height: 40vw;
207            background-color: rgba(20, 20, 230, 0.5);
208            position: absolute;
209            top: 50%;
210            left: 50%;
211            transform: translate(-50%, -50%);
212        }
213    </style>
214</head>
215
216<body>
217    <nav id="navJs" class="nav">
218        <ul class="nav-list">
219            <li id="li01Js" class="nav-item">page01</li>
220            <li id="li02Js" class="nav-item">page02</li>
221            <li id="li03Js" class="nav-item">page03</li>
222        </ul>
223
224        <ul class="btn-list">
225            <li class="btn-item"><a href="">WEB入会はこちら</a></li>
226            <li class="btn-item"><a href="">見学・体験予約はこちら</a></li>
227            <li class="btn-item"><a href="">お問い合わせ</a></li>
228        </ul>
229    </nav>
230
231    <button class="hamburger hide" id="burgerBtnJs">開</button>
232    <div id="page01Js" class="page01">
233        <div>
234
235        </div>
236    </div>
237    <div id="page02Js" class="page02">
238        <div>
239
240        </div>
241    </div>
242    <div id="page03Js" class="page03">
243        <div>
244
245        </div>
246    </div>
247    <div class="close" id="closeJs"></div>
248    <script>
249        const body = document.body;
250        const hamburger = document.getElementById('burgerBtnJs');
251        const blackBg = document.getElementById('closeJs');
252
253        hamburger.addEventListener('click', function () {
254            body.classList.toggle('nav-open');
255            navJs.classList.toggle("start");
256            hamburger.innerText === "開" ? hamburger.innerText = "閉" : hamburger.innerText = "開"
257        });
258        blackBg.addEventListener('click', function () {
259            hamburger.click();
260        });
261
262        const scroll = (target) => {
263            target.scrollIntoView({
264                behavior: "smooth",
265                block: "end"
266            })
267        }
268
269        const navItem = document.getElementsByClassName("nav-item");
270
271        for (let i = 0, maxLen = navItem.length; i < maxLen; i++) {
272            navItem[i].addEventListener('click', () => {
273                hamburger.click();
274                switch (i) {
275                    case 0:
276                        scroll(page01Js);
277                        break;
278                    case 1:
279                        scroll(page02Js);
280                        break;
281                    case 2:
282                        scroll(page03Js);
283                        break;
284                }
285            });
286        }
287
288    </script>
289</body>
290
291</html>

↓スムーススクロールさせるように定義したコード部分

Javascript
1        const scroll = (target) => {
2            target.scrollIntoView({
3                behavior: "smooth",
4                block: "end"
5            })
6        }