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

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

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

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

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

毫无进展。


当前回答

普通 JS:

如果你使用现代浏览器,可以在纯JS中完成。

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

浏览器支持是一个小问题,但现代浏览器支持它。

其他回答

你需要动画html,主体

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

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

问题是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");

再举一个例子:

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>

以下是我的观点:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

目标:

<h2 id="contact">Contact</h2>

这个脚本是对Vector脚本的改进。我对它做了一点改动。因此,这个脚本适用于带有类页面的每个链接—在其中滚动。

起初不放松:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

为了缓解你将需要Jquery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

把这个添加到脚本中:

'easeOutExpo'

最后

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

你可以在这里找到所有的便利:小抄。