Fatal编程技术网
  • javascript/
  • Javascript 为什么可以'；我的卷轴不能顺利地向上滚动吗？

Javascript 为什么可以'；我的卷轴不能顺利地向上滚动吗？

javascript html css scroll

Javascript 为什么可以'；我的卷轴不能顺利地向上滚动吗？,javascript,html,css,scroll,smooth,Javascript,Html,Css,Scroll,Smooth,首先，这里是index.html <html> <head> <title>Demo</title> <link rel="stylesheet" type="text/css" href="stuff.css"/> </head> <body> <div class=passage> <h1>Getting

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


$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'.scrollup'）.fadeIn（）；
}否则{
$（'.scrollup'）.fadeOut（）；
}
});
$（'.scrollup'）。单击（函数（）{
$（“html，body”）.animate({
滚动顶部：0
}, 600);
返回false；
});
});
所以我要做的是，当我按下index.html中的“四个按钮”时，index.html页面将平滑地滚动到顶部。不幸的是，这没有发生，它只是传送到顶部，没有缓慢的移动。说到javascript，我非常迟钝，所以我想在这里问一下：我做错了什么，当我点击“四个按钮”时，我不能平滑地滚动到顶部

谢谢大家，非常感谢。

当您正确编写stylescripts.js时，它会起作用

我尝试将javascript代码复制到html文件中，如下所示，它工作正常。（为了便于检查，我在html上添加了一些元素。）


演示
开始

要开始，请单击上面四个按钮之一。每个按钮都会将您带到相应的页面。


问题/关注

如果有任何问题，请访问该页面。同样，如果您对数据、网站等有任何具体问题或担忧，请访问该页面。


:

:

:

:

:

:

:

:

:

:

:

:

:

:

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'.scrollup'）.fadeIn（）；
}否则{
$（'.scrollup'）.fadeOut（）；
}
});
$（'.scrollup'）。单击（函数（）{
$（“html，body”）.animate({
滚动顶部：0
}, 600);
返回false；
});
});
可能：您的
stylescripts.js
应该只包含
script
。。为什么包含
html
？它是无效的。。您还没有在
html
中的任何地方引用您的
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>

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