为什么我的卷轴不能顺利向上滚动

Why can't my my scroll scroll up smoothly?

本文关键字：滚动 不能 我的 为什么      更新时间：2023-09-26

首先，这里是索引.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>

这是东西.css

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

这是样式脚本.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时，我很笨拙，所以我想我会在这里问：当我单击"四个按钮"时，我做错了什么，无法将平滑的滚动移动到顶部？

谢谢

大家，谢谢。

当你正确地编写样式脚本时.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>
相关文章：