为什么我的滚动条不能顺利向上滚动？答案

【问题标题】：Why can't my my scroll scroll up smoothly?为什么我的滚动条不能顺利向上滚动？
【发布时间】：2016-01-15 03:45:26
【问题描述】：

首先，这里是 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 非常陌生，所以我想我会在这里问：我做错了什么，当我单击“四个按钮”时无法平滑滚动到顶部？

谢谢大家，感激不尽。

【问题讨论】：

可能：stackoverflow.com/questions/7717527/…
你stylescripts.js 应该只包含script.. 为什么它包含html？它无效..而且您没有在html 中的任何地方引用您的stylescripts.js...所以不要指望动画会发生..

标签： javascript html css scroll smooth

【解决方案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>

【讨论】：