Question

首先，这是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>

这是stuff.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 {

}

这里是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时，我很高兴，所以我想我会问：我点击“四个按钮”时，我无法顺利滚动到顶部？

谢谢大家，感激不尽。

Answer 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>

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

1 个答案: