我一直试图得到一个滚动到div id jquery代码正确工作。基于另一个堆栈溢出问题，我尝试了以下
演示http://jsfiddle.net/kevinPHPkevin/8tLdq/
$('#myButton').click(function() {
$.scrollTo($('#myDiv'), 1000);
});
但这并没有起作用。我也试过了
$('#myButton').click(function(event) {
event.preventDefault();
$.scrollTo($('#myDiv'), 1000);
});
毫无进展。
当前回答
下面是我的解决方案，平滑滚动到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;
}
}
});
其他回答
以下是我的观点:
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>
普通 JS：
如果你使用现代浏览器，可以在纯JS中完成。
document
.getElementById("range-calculator")
.scrollIntoView({ behavior: "smooth" });
浏览器支持是一个小问题，但现代浏览器支持它。
下面是我的解决方案，平滑滚动到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-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});
});
问题是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");
