js スクロール　アニメーション

jsで、ボタンをクリックしたらページ上部に遅い速さでスクロールするという機能を実装させたいです。下記のコードで、変数speedの値をどれだけ高くしてもスクロールスピードが遅くなりません。何が原因なのでしょうか。```ここに言語を入力

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>jQuery 追加課題1</title>
7    <link rel="stylesheet" href="css/style.css" />
8    <link rel="stylesheet" href="css/reset.css">
9    
10  </head>
11  <body>
12
13    <div class="mv" id="js-mv">
14      <header class="header" id="js-header">
15        <h2 class="mv-ttl">SAMPLE</h2>
16        <nav class="mv-nav">
17          <ul class="nav-items">
18            <li class="nav-item js-nav-items"><a href="">ホーム</a></li>
19            <li class="nav-item js-nav-items"><a href="">SAMPLEについて</a></li>
20            <li class="nav-item js-nav-items"><a href="">SAMPLEのメンバー</a></li>
21            <li class="nav-item js-nav-items"><a href="">採用情報</a></li>
22            <li class="nav-item js-nav-items"><a href="">お問い合わせ</a></li>
23          </ul>
24        </nav>
25      </header>
26      <div class="mv-message">
27        <h3 class="mv-message-ja">未来を<br>チャレンジする<br>人になれ</h3>
28        <p class="mv-message-en">to be challenger<br>for the future</p>
29      </div>    </div>
30    <section class="human-challenge">
31      <div class="human-challenge-ttl"> 
32        <h2 class="human-challenge-ttl-en">People's Challenge<br>for the People<br>by the People</h2>
33        <p class="human-challenge-ttl-ja">人の人による人の挑戦</p>
34      </div>
35      <div class="about-human-challenge-ttl">
36        <p class="about-human-challenge-ttl-paragraph">人はなぜ挑戦するのか</p>
37        <p class="about-human-challenge-ttl-paragraph">それでいてなぜ諦めるのか</p>
38        <p class="about-human-challenge-ttl-paragraph">人はなぜ努力するのか</p>
39        <p class="about-human-challenge-ttl-paragraph">それでいてなぜ怠けるのか</p>
40        <p class="about-human-challenge-ttl-paragraph">全ての未来は自分に託されているのです</p>
41      </div>
42    </section>
43
44    <footer class="footer">
45      <div class="inner">
46        <h2 class="footer-ttl">SAMPLE</h2>
47        <div class="about-company">
48          <ul class="about-company-ul">
49            <li class="about-company-li"><a href="" class="home">ホーム</a></li>
50            <li class="about-company-li"><a href="" class="recruit">採用情報</a></li>
51            <li class="about-company-li"><a href="" class="inquire">お問い合わせ</a></li>
52          </ul>
53        </div>
54        <div class="policy">
55          <ul class="policy-ul">
56            <li class="policy-li"><a href="">グループサイト</a></li>
57            <li class="policy-li"><a href="">プライバシーポリシー</a></li>
58            <li class="policy-li"><a href="">サイトポリシー</a></li>
59          </ul>
60        </div>
61        <div class="copy-right"><small>&copy;2020 sample.inc</small></div>
62      </div>
63      <button class="scroll-button" type="button" id="js-button"><a href="">↑</a></button>
64      
65
66    </footer>
67    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
68    <script src="js/jquery.bgswitcher.js"></script>
69    <script src="js/main.js"></script>
70  
71  </body>
72</html>
73

js
1$(function(){
2    let postion = $("html,body").offset().top;
3    let speed = 50000;
4
5$(".scroll-button").click(function(){
6    $("html,body").animate({scrollTop:position}, speed, "swing"); 
7    
8    
9});
10});
11

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

回答1件

投稿2021/08/28 14:10

Ftps

総合スコア288

kei344

2021/08/28 14:52

特にそのような規定は無いですよ。【<script>: スクリプト要素 - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/script > 許可されている親要素メタデータコンテンツを受け入れるすべての要素、または記述コンテンツを受け入れるすべての要素