如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
这样做不需要jQuery。一个标准的HTML标记就足够了。。。
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
其他回答
纯JavaScript解决方案:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
我在Codepen上编写了一个动画解决方案
此外,您可以尝试使用CSS滚动行为的另一种解决方案:smooth属性。
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
function scrolltop() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#back-to-top').fadeIn(duration);
} else {
jQuery('#back-to-top').fadeOut(duration);
}
});
jQuery('#back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
}
如果您确实想要平滑滚动,请尝试以下操作:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
这将接受href=“#top”的任何<a>标记,并使其平滑滚动到顶部。
如果您想滚动到具有ID的任何元素,请尝试以下操作:
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 700, 'swing', function () {
window.location.hash = target;
});
});``
最短的
location='#'
这种解决方案是对pollinrata答案的改进,并且有一些缺点:没有平滑的滚动和更改页面位置,但最短