如何像Ctrl+Home一样快速跳转到页面顶部

How to jump to the top of page as FAST as Ctrl+Home

本文关键字：顶部 一样 Ctrl+Home 何像      更新时间：2023-09-26

这个问题看起来像是一个重复的问题，但我没有找到真正的答案，如何像Ctrl+Home常用的浏览器快捷键那样快速地跳到页面顶部。

很多建议如何"顺利"做到这一点——但我需要一个最快的JUMP，在没有任何"平滑滚动"的情况下登顶。

我有以下常用功能

<script type="text/javascript">
var timeOut;
function scrollToTop() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-100);
    timeOut=setTimeout('scrollToTop()',0);
  }
  else clearTimeout(timeOut);
}
</script>

那么，如何迫使它真正跳到顶端。。。不是"平滑滚动"？

任何其他解决方案（除了上面的函数）也很有趣。

谢谢你的任何提示。

尝试使用：window.scrollTo(0, 0);

只需像这样尝试window.scroll(0,0)。

滚动功能本质上不包括任何延迟或平滑过渡。因此，如果您简单地将x，y坐标作为0,0传递，您将立即移动到窗口的顶部。

您可以简单地使用锚点来完成此操作。

<script type="text/javascript">
function scrollToTop() {
    window.location = '#';
}
</script>


$(function() {
  $("#goToTop").click(function() {
    $('body').animate({ scrollTop: $("html").offset().top}, 0);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus ligula ut lacus vestibulum, sit amet auctor risus ultrices. Morbi fringilla non ex vel placerat. Donec ut libero condimentum, vestibulum libero sit amet, maximus nulla. Vivamus sit amet turpis scelerisque, varius lectus vel, tincidunt metus. Nulla at porta diam. Pellentesque vel interdum arcu, quis porttitor lacus. Pellentesque sollicitudin ante sapien, a fermentum ligula aliquam sed. Vivamus vitae consequat justo, ac fringilla nunc. Fusce quis commodo est. Pellentesque a augue non odio porttitor vulputate. Etiam maximus orci sed libero rutrum, in rutrum dui tristique. Praesent semper laoreet convallis. Nam volutpat lectus dolor, ut tincidunt enim bibendum et. Sed nisl arcu, tempus vel dui at, egestas dignissim orci.
Quisque vitae pellentesque nunc. Proin finibus quam massa, in lobortis neque consequat nec. Ut condimentum cursus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu enim eget odio vestibulum tincidunt ac sit amet nulla. Nullam pellentesque nisl fringilla imperdiet lobortis. Nullam malesuada, elit dictum placerat tristique, ex mauris pretium purus, eu venenatis est augue vitae enim.
Proin varius bibendum mi sed efficitur. Duis eget urna sodales risus mattis tincidunt non at massa. Vivamus ornare orci nisl, eu rutrum diam condimentum et. Cras suscipit velit odio, ac dictum eros dictum et. Aliquam ut finibus nulla, a eleifend dolor. Aenean vitae malesuada nisl. Sed tellus ante, auctor eget faucibus id, pharetra et nibh. Quisque lorem libero, sagittis quis arcu in, pellentesque consectetur enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget orci in risus rhoncus egestas consectetur in eros.
Etiam id auctor sem, eget finibus odio. Sed pellentesque mollis dolor, in fermentum diam aliquam quis. Phasellus finibus neque vel justo scelerisque, in luctus turpis fringilla. Nullam vitae orci sit amet augue vehicula cursus. Morbi fermentum orci ac ex fringilla, sed fringilla mi pharetra. Donec risus dolor, pretium id nunc et, tincidunt molestie eros. Duis tincidunt pharetra tincidunt. Pellentesque dignissim ipsum eu feugiat gravida. Etiam id pulvinar ligula, sit amet pretium mi. Fusce quis ultrices nunc, dapibus accumsan sapien. Proin et arcu ultrices, dignissim eros non, pretium leo. Vestibulum euismod turpis urna, nec consectetur dui congue eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ac nisl facilisis, vehicula sapien at, semper turpis. Pellentesque facilisis, leo vitae posuere lacinia, ex urna ullamcorper risus, eu sollicitudin risus neque quis libero.
Phasellus vulputate enim arcu, quis cursus diam dictum et. Aenean ac massa ut justo blandit facilisis. Maecenas sollicitudin fermentum mi non hendrerit. Etiam non feugiat odio. Nulla vel urna non magna consectetur facilisis. Sed vitae blandit erat. Ut ac consectetur lorem. Quisque luctus risus ex, vitae scelerisque risus suscipit a. Cras varius ex vitae lacinia blandit. Fusce a commodo mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus ligula ut lacus vestibulum, sit amet auctor risus ultrices. Morbi fringilla non ex vel placerat. Donec ut libero condimentum, vestibulum libero sit amet, maximus nulla. Vivamus sit amet turpis scelerisque, varius lectus vel, tincidunt metus. Nulla at porta diam. Pellentesque vel interdum arcu, quis porttitor lacus. Pellentesque sollicitudin ante sapien, a fermentum ligula aliquam sed. Vivamus vitae consequat justo, ac fringilla nunc. Fusce quis commodo est. Pellentesque a augue non odio porttitor vulputate. Etiam maximus orci sed libero rutrum, in rutrum dui tristique. Praesent semper laoreet convallis. Nam volutpat lectus dolor, ut tincidunt enim bibendum et. Sed nisl arcu, tempus vel dui at, egestas dignissim orci.
Quisque vitae pellentesque nunc. Proin finibus quam massa, in lobortis neque consequat nec. Ut condimentum cursus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu enim eget odio vestibulum tincidunt ac sit amet nulla. Nullam pellentesque nisl fringilla imperdiet lobortis. Nullam malesuada, elit dictum placerat tristique, ex mauris pretium purus, eu venenatis est augue vitae enim.
Proin varius bibendum mi sed efficitur. Duis eget urna sodales risus mattis tincidunt non at massa. Vivamus ornare orci nisl, eu rutrum diam condimentum et. Cras suscipit velit odio, ac dictum eros dictum et. Aliquam ut finibus nulla, a eleifend dolor. Aenean vitae malesuada nisl. Sed tellus ante, auctor eget faucibus id, pharetra et nibh. Quisque lorem libero, sagittis quis arcu in, pellentesque consectetur enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget orci in risus rhoncus egestas consectetur in eros.
Etiam id auctor sem, eget finibus odio. Sed pellentesque mollis dolor, in fermentum diam aliquam quis. Phasellus finibus neque vel justo scelerisque, in luctus turpis fringilla. Nullam vitae orci sit amet augue vehicula cursus. Morbi fermentum orci ac ex fringilla, sed fringilla mi pharetra. Donec risus dolor, pretium id nunc et, tincidunt molestie eros. Duis tincidunt pharetra tincidunt. Pellentesque dignissim ipsum eu feugiat gravida. Etiam id pulvinar ligula, sit amet pretium mi. Fusce quis ultrices nunc, dapibus accumsan sapien. Proin et arcu ultrices, dignissim eros non, pretium leo. Vestibulum euismod turpis urna, nec consectetur dui congue eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ac nisl facilisis, vehicula sapien at, semper turpis. Pellentesque facilisis, leo vitae posuere lacinia, ex urna ullamcorper risus, eu sollicitudin risus neque quis libero.
Phasellus vulputate enim arcu, quis cursus diam dictum et. Aenean ac massa ut justo blandit facilisis. Maecenas sollicitudin fermentum mi non hendrerit. Etiam non feugiat odio. Nulla vel urna non magna consectetur facilisis. Sed vitae blandit erat. Ut ac consectetur lorem. Quisque luctus risus ex, vitae scelerisque risus suscipit a. Cras varius ex vitae lacinia blandit. Fusce a commodo mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<button id="goToTop">Go to top</button>

有关更多信息，请参阅Warface anwser

我使用了持续时间等于0的.animate。

相关文章：