我一直试图得到一个滚动到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;
其他回答
下面是我的解决方案，平滑滚动到div /锚使用jQuery，以防你有一个固定的标题，这样它就不会在它下面滚动。 同样，如果你从其他页面链接它。
只需替换”。Site-header”到包含标题的div。
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
}, 1000);
return false;
}
}
});
//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
var target = $('#'+location.href.split("#")[1]);
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - headerheight
}, 1);
return false;
}
}
});
这段代码对于网络上的任何内部链接都很有用
$("[href^='#']").click(function() {
id=$(this).attr("href")
$('html, body').animate({
scrollTop: $(id).offset().top
}, 2000);
});
这个脚本是对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');
});
你可以在这里找到所有的便利:小抄。
我的香草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;
普通 JS：
如果你使用现代浏览器，可以在纯JS中完成。
document
.getElementById("range-calculator")
.scrollIntoView({ behavior: "smooth" });
浏览器支持是一个小问题，但现代浏览器支持它。
