如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
使用AplineJS和TailwindCSS返回页首:
<button
x-cloak
x-data="{scroll : false}"
@scroll.window="document.documentElement.scrollTop > 20 ? scroll = true : scroll = false"
x-show="scroll" @click="window.scrollTo({top: 0, behavior: 'smooth'})"
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
class="fixed inline-block p-3 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-600 rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg bottom-5 right-5"
id="btn-back-to-top"
x-transition.opacity
>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
其他回答
平滑滚动,纯javascript:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
最短的
location='#'
这种解决方案是对pollinrata答案的改进,并且有一些缺点:没有平滑的滚动和更改页面位置,但最短
您可以使用javascript的内置函数scrollTo:
函数滚动(){window.scrollTo({顶部:0,行为:“平滑”});}<button onclick=“scroll”>滚动</button>
有趣的是,其中大多数根本不适合我,所以我使用了jQuery-ScrollTo.js:
wrapper.find(".jumpToTop").click(function() {
$('#wrapper').ScrollTo({
duration: 0,
offsetTop: -1*$('#container').offset().top
});
});
它奏效了$(document).sollTop()返回了0,而这个函数实际上起了作用。
真的很奇怪:这个问题已经活跃了五年了,但仍然没有一个普通的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