Question

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

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

我想让它顺利滚动，而不是只跳到那个div。这是jsfiddle示例

感谢。

Answer 1

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

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

DEMO HERE

Answer 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;
          }
        }
      });

});

Answer 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"
    });
});

平滑滚动不工作Javascript

3 个答案: