我一直试图得到一个滚动到div id jquery代码正确工作。基于另一个堆栈溢出问题，我尝试了以下
演示http://jsfiddle.net/kevinPHPkevin/8tLdq/
$('#myButton').click(function() {
$.scrollTo($('#myDiv'), 1000);
});
但这并没有起作用。我也试过了
$('#myButton').click(function(event) {
event.preventDefault();
$.scrollTo($('#myDiv'), 1000);
});
毫无进展。
当前回答
问题是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代码来实现这一点。
教程，演示和源代码可以从这里找到-使用jQuery平滑滚动到div
JavaScript:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
});
HTML:
<a href="#section1">Go Section 1</a>
<div id="section1">
<!-- Content goes here -->
</div>
这段代码对于网络上的任何内部链接都很有用
$("[href^='#']").click(function() {
id=$(this).attr("href")
$('html, body').animate({
scrollTop: $(id).offset().top
}, 2000);
});
你需要动画html，主体
演示http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
我的香草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;
这对我很管用。
<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>
谢谢。
