我一直在尝试滚动到 div id jquery 代码才能正常工作。基于另一个堆栈溢出问题，我尝试了以下操作
演示http://jsfiddle.net/kevinPHPkevin/8tLdq/
$('#myButton').click(function() {
$.scrollTo($('#myDiv'), 1000);
});
但它没有用。它只是捕捉到 div。我也试过
$('#myButton').click(function(event) {
event.preventDefault();
$.scrollTo($('#myDiv'), 1000);
});
毫无进展。
你需要动画 html, body
演示http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
如果要覆盖页面上的标准href-id 导航而不更改 HTML 标记以实现平滑滚动，请使用此（示例）：
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
这是我的 2 美分：
Javascript：
$('.scroll').click(function() {
$('body').animate({
scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
}, 1000);
});
网址：
<a class="scroll" target="contact">Contact</a>
和目标：
<h2 id="contact">Contact</h2>
document
.getElementById("range-calculator")
.scrollIntoView({ behavior: "smooth" });
浏览器支持有点问题，但现代浏览器支持它。
再举一个例子：
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>