我一直试图得到一个滚动到div id jquery代码正确工作。基于另一个堆栈溢出问题,我尝试了以下

演示http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

但这并没有起作用。我也试过了

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

毫无进展。


当前回答

我的香草JS和jQuery的解决方案

香草JS:

document
    .querySelector("#myDiv")
    .scrollIntoView({ behavior: "smooth" });

jQuery:

你需要动画html,主体

$("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

CSS:

html {
  scroll-behavior: smooth;
}

滚动行为的其他属性

scroll-behavior: auto|smooth|initial|inherit;

其他回答

再举一个例子:

HTML链接:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML锚:

  <div id="featured">My content here</div>

问题是JQuery。最简单的应该是下面的代码。确保包含了JQueryUI。用最新的版本替换{version},当然这里是你可以用于动画的所有方法的列表。2秒的easeOutExpo将给你非常艺术的滚动。

线性, 摆动, easeOutQuad, easeInQuad, easeInOutQuad, easeOutCubic, easeInCubic, easeInOutCubic, easeOutQuart, easeInQuart, easeInOutQuart, easeOutQuart, easeOutQuint, easeInOutQunit, easeOutExpo, easeInExpo, easeInExpo, easeInOutSine, easeInSine, easeInSine, easeOutSine, easeOutSine, easeInCirc, easeInOutCirc, easeInOutCirc, easeOutCirc, easeInElastic, easeInElastic, easeInElastic, easeOutBack, easeInBack, easeInOutBack, easeOutBack, easeOutBounce, easeInOutBounce, easeInOutBounce

<script src="https://code.jquery.com/ui/{version}/jquery-ui.js"></script>

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

以下是我使用的方法:

<!-- jquery smooth scroll to id's -->   
<script>
$(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
        }, 500);
        return false;
      }
    }
  });
});
</script>

这种方法的优点在于,您可以使用无限数量的散列链接和相应的id,而不必为每个散列链接执行新脚本。

如果你使用的是WordPress,将代码插入到主题的footer.php文件中,就在body结束标签</body>之前。

如果您无法访问主题文件,则可以将代码嵌入到post/page编辑器中(必须以文本模式编辑文章)或将加载到所有页面的Text小部件上。

如果您使用的是其他CMS或HTML,则可以将代码插入到所有页面上加载的部分中,该部分位于body结束标记</body>之前。

如果你需要更多的细节,请查看我的快速帖子:jQuery平滑滚动到id

希望这对你有所帮助,如果你有任何问题,请告诉我。

我试了一下,效果很好。

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

这对我很管用。

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

谢谢。