Почему моя прокрутка не может плавно прокручиваться вверх?

Для начала вот index.html

<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="stuff.css"/>
    </head>
    <body>


         <div class=passage>

<h1>Getting Started</h1>
            <p>
                To get started, click one of the <a href="#" class="scrollup">four buttons</a> that are above. Each button will take you to its appropriate page. 
            </p><br>

            <h1>Questions/Concerns</h1>
            <p>
                If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page.
            </p><br>


        </div>


        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </body>
</html>

Вот материал.

.passage {
    margin-top: 40px;
    margin-left: 200px;
    margin-right: 200px;
    border-radius: 25px;
    float: left;
    height: 1000px;
}

.passage p{
    margin-left: 10px;
}

.passage h3{
    font-style: bold;
}

.scrollup {

}

А вот stylescripts.js

<!DOCTYPE HTML>
<html>
    <body>
        <script>
$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});
</script>
</body>
</html>

Поэтому я пытаюсь сделать так, чтобы при нажатии "четырех кнопок" в index.html страница index.html плавно прокручивалась до самого верха. К сожалению, этого не происходит, и он просто телепортируется наверх без медленного движения. Я довольно дурак, когда дело доходит до javascript, поэтому я решил спросить здесь: что я делаю не так, что не могу получить плавное движение прокрутки вверх, когда нажимаю "четыре кнопки"?

Спасибо всем, ценю это.

Источник

1 ответ

Это работает, когда вы пишете stylescripts.js правильно.

Я попытался скопировать ваш код JavaScript в HTML-файл, как показано ниже, и он работает правильно. (Для проверки я добавил некоторые элементы в HTML.)

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="stuff.css"/>
    </head>
    <body>


         <div class=passage>

          <h1>Getting Started</h1>
            <p>
                To get started, click one of the four buttons that are above. Each button will take you to its appropriate page. 
            </p><br>

            <h1>Questions/Concerns</h1>
            <p>
                If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page.
            </p><br>


        </div>
        <div>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <a href="#" class="scrollup">four buttons</a>
        </div>

        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>
          $(document).ready(function () {

              $(window).scroll(function () {
                  if ($(this).scrollTop() > 100) {
                      $('.scrollup').fadeIn();
                  } else {
                      $('.scrollup').fadeOut();
                  }
              });

              $('.scrollup').click(function () {
                  $("html, body").animate({
                      scrollTop: 0
                  }, 600);
                  return false;
              });

          });
        </script>
    </body>
</html>
Источник
Другие вопросы по тегам