如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
如果你不需要更改动画,那么你就不需要使用任何特殊的插件——我只需要使用原生JavaScript window.scrollTo()方法——传入0,0将立即将页面滚动到左上角。
window.scrollTo(xCoord, yCoord);
参数
xCoord是沿水平轴的像素。yCoord是沿垂直轴的像素。
其他回答
如果您确实想要平滑滚动,请尝试以下操作:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
这将接受href=“#top”的任何<a>标记,并使其平滑滚动到顶部。
如果您想平滑滚动,请尝试以下操作:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
另一种解决方案是JavaScript window.scrollTo方法:
window.scrollTo(x-value, y-value);
参数:
x值是沿水平轴的像素。y值是沿垂直轴的像素。
这样做不需要jQuery。一个标准的HTML标记就足够了。。。
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
滚动到的一个简单示例(使用html效率更高,但以下是如何使用JavaScript实现的):
const btn=document.querySelector('.btn');btn.addEventListener('click',()=>{window.scrollTo({左:0,顶部:0,})})window.addEventListener('scroll',函数(){const scrollHeight=window.pageYOffset;如果(滚动高度>500){btn.classList.add('sow-link');}其他{btn.classList.remove('sow-link');}});.节{衬垫底部:5rem;高度:90vh;}.磅{位置:固定;底部:3rem;右:3rem;背景:蓝色;宽度:2rem;高度:2rem;颜色:#fff;可见性:隐藏;z指数:-100;}.show链接{可见性:可见;z指数:100;}.标题h2{文本对齐:居中;}<section class=“section”><div class=“title”><h2>第一节</h2></div></section><section class=“section”><div class=“title”><h2>第二节</h2></div></section><section class=“section”><div class=“title”><h2>第三节</h2></div></section><a class=“btn”></a>
你不需要JQuery。只需调用脚本
window.location = '#'
单击“转到顶部”按钮
示例演示:
输出.jsbin.com/fakumo#
PS:当你使用像angularjs这样的现代库时,不要使用这种方法。这可能会破坏URL散列。