如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
动机
这个简单的解决方案在本地工作,并实现了到任何位置的平滑滚动。
它避免了使用锚链接(带有#的链接),在我看来,如果你想链接到一个部分,这些链接是有用的,但在某些情况下不是很舒服,特别是当指向顶部时,这可能会导致两个不同的URL指向同一位置(http://www.example.org和http://www.example.org/#).
解决方案
在要滚动到的标记中添加一个id,例如第一个部分,它回答了这个问题,但id可以放在页面的任何位置。
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
然后,作为一个按钮,您可以使用链接,只需使用如下代码编辑onclick属性即可。
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
其中document.getElementById的参数是单击后要滚动到的标记的id。
其他回答
真的很奇怪:这个问题已经活跃了五年了,但仍然没有一个普通的JavaScript答案来激活滚动……所以,现在就开始吧:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
如果愿意,可以将其包装在函数中,并通过onclick属性调用它。检查这个jsfiddle
注意:这是一个非常基本的解决方案,可能不是最有效的解决方案。这里可以找到一个非常详细的示例:https://github.com/cferdinandi/smooth-scroll
如果您不希望平滑滚动,您可以在启动平滑滚动动画时立即欺骗并停止它……如下所示:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});
我不知道它是否被推荐/允许,但它有效:)
你什么时候用这个?我不确定,但也许当您想使用Jquery一键制作一件事情的动画,而不使用动画制作另一件事情时?即打开页面顶部的管理登录面板中的幻灯片,然后立即跳到顶部查看。
这将起作用:
window.srollTo(0,0);
以上答案在SharePoint 2016中都不起作用。
必须这样做:https://sharepoint.stackexchange.com/questions/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
动机
这个简单的解决方案在本地工作,并实现了到任何位置的平滑滚动。
它避免了使用锚链接(带有#的链接),在我看来,如果你想链接到一个部分,这些链接是有用的,但在某些情况下不是很舒服,特别是当指向顶部时,这可能会导致两个不同的URL指向同一位置(http://www.example.org和http://www.example.org/#).
解决方案
在要滚动到的标记中添加一个id,例如第一个部分,它回答了这个问题,但id可以放在页面的任何位置。
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
然后,作为一个按钮,您可以使用链接,只需使用如下代码编辑onclick属性即可。
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
其中document.getElementById的参数是单击后要滚动到的标记的id。