平滑滚动到div id jQuery

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

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

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

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

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

毫无进展。

当前回答

这个脚本是对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');
});

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

2015-12-08 13:18:39

其他回答

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

2022-11-25 17:09:40

这对我很管用。

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

谢谢。

2018-11-23 19:00:12

我的香草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;

2021-12-30 21:03:00

这是一个简单的。source -https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

2018-10-11 12:39:22