平滑滚动不起作用Javascript答案

【问题标题】：Smooth scroll not working Javascript平滑滚动不起作用Javascript
【发布时间】：2014-05-14 10:26:23
【问题描述】：

我正在尝试在我的网页上进行平滑滚动。我认为错误在这一行，但我不知道如何解决它。

a[ id= "menu" ]:target ~ .panel {
  -webkit-transform: translateY( 0px);
  transform: translateY( 0px );
}

我希望它平滑滚动，而不是仅仅跳到那个 div。这是jsfiddle 示例

谢谢。

【问题讨论】：

您的标记中没有 ID 为 menu 的 <a> 元素。
有，在 HTML 的第 4 行。
这是<a href="#menu">，而不是<a id="menu">。不是同一种野兽。

标签： javascript jquery css scroll

【解决方案1】：

您可以使用以下代码进行操作：

$('html,body').animate({
   scrollTop: $("#menu").offset().top
});

DEMO HERE

【讨论】：

我试过这个，但它仍然无法在我的应用程序上运行。我到底应该在哪里包含 jquery，也许这就是问题所在。我可以使用已经包含 1.11.0 的 jquery 吗？

【解决方案2】：

它增加了平滑的滚动效果：

在您的页面中添加此脚本代码

    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });

});

【讨论】：

试着把它放在那个jsfiddle里面，它不起作用。
我认为您没有在代码中添加 Jquery 库。您必须添加它。
在 js fiddle 的 HTML 部分添加：

【解决方案3】：

您要尝试平滑滚动滑块或部分，它可以通过 animate() 来完成，或者您也可以尝试显示您的部分，例如：

show({"right":"1000px"}, 1000);

下一个方法是使用 smoothDivScroll()

Source:  http://www.smoothdivscroll.com/    

<script type="text/javascript">
$(document).ready(function () {
    $("#scrollablediv").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });
});

【讨论】：