我在页面上有一个，当按下这个按钮时，使用jquery显示一个隐藏的。

如何使用该函数中的javascript/jquery命令滚动到页面顶部？即使滚动条立即跳到顶部也是可取的。我不是在找一个平滑的滚动。

---

如果您不需要更改动画，那么您不需要使用任何特殊的插件-我只使用本机的javascript window.scroll to方法-传入0,0将立即将页面滚动到左上角。

1	window.scrollTo(x-coord, y-coord);

参数

• X坐标是沿水平轴的像素。
• Y坐标是沿垂直轴的像素。

相关讨论

• 这就是我的观点，如果您不需要动画平滑滚动，那么您就不需要使用jquery。
• 有趣的是，Jeff的评论是真诚的，对于那些只想让事情跨浏览器工作的人来说，95%的时间应该只使用jquery。这是来自于现在必须编写大量纯javascript的人，因为我们负担不起库的开销，从而减慢了广告代码的速度：(
• 这个答案与问题无关。如果问题是：我应该使用什么脚本和方法滚动到页面顶部？正确答案如下：stackoverflow.com/questions/4147112/&hellip；
• 在火狐30和Chrome36中不适合我。
• 在火狐40和Chrome44中为我工作(向Mikhail发表评论)
• 如果我想滚动到页面的底部呢？
• 滚动到window.scrollTo(0, document.body.scrollHeight);页底部

---

如果要平滑滚动，请尝试如下操作：

1 2 3 4

$("a[href='#top']").click(function() {   $("html, body").animate({ scrollTop: 0 },"slow");   return false; });

这将获取其href="#top"的任何标记，并使其平滑滚动到顶部。

相关讨论

• + 1。我只是想知道怎么做这样的事情，谷歌引领我来到这里。不过，问题是，文档中的"Scrolltop"功能在哪里？我只是找了一下，但找不到。
• Scrolltop不是函数，它是window元素的属性
• jquery的scrolltop()的api.jquery.com/scrolltop
• 当使用animate的完整回调时，这无法正常工作，因为它将运行两次。
• $("html，body").animate(scrolltop:0，"slow")正在工作。
• 您知道为什么需要在选择器中添加HTML&body吗？
• @用户751564：不需要，请查看stackoverflow.com/a/16430109/544283。
• 所以您已经将HTML添加到选择器中了，因为尽管默认情况下它在主体中，但它可能会被移动到外部的HTML中？
• "html"和"body"都是浏览器兼容性所必需的，也就是说，ChromeV27滚动时只显示"body"，而IE8则不显示。IE8滚动时只显示"html"，而ChromeV27则不显示。
• @实际上，window.pageYOffset将是窗口e的属性吗？L？E？M？E？n？T？对象。

---

尝试在顶部滚动

1 2 3

$(document).ready(function(){     $(window).scrollTop(0); });

相关讨论

• 这是相同的：if("历史记录中的滚动还原")history.scrollRestore='manual'；

---

这样做不需要jquery。一个标准的HTML标记就足够了…

1 2 3 4

blah blah blah Click Here To Destroy The World!

相关讨论

• +1如果您需要导航到特定的元素，而不是仅仅导航到顶部，这是很好的。
• 使用"top"跳转到页面顶部。
• 这似乎是治疗痉挛的最佳方法。
• 好极了！有没有办法使它平滑滚动？

---

所有这些建议都适用于各种情况。对于那些通过搜索找到这个页面的人，也可以尝试一下。jquery，没有插件，滚动到element。

1 2 3

$('html, body').animate({     scrollTop: $("#elementID").offset().top }, 2000);

---

平滑动画的更好解决方案：

1 2	// this changes the scrolling behavior to"smooth" window.scrollTo({ top: 0, behavior: 'smooth' });

参考：https://developer.mozilla.org/en-us/docs/web/api/window/scrollto示例

相关讨论

• 非常干净简单，谢谢！
• 您可能仍然需要对ScrollOptions的polyfill支持(对于某些浏览器)：github.com/iamdustan/smoothscroll
• 我非常喜欢这个解决方案。

---

平滑滚动，纯javascript：

1 2 3 4 5 6 7

(function smoothscroll(){     var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;     if (currentScroll > 0) {          window.requestAnimationFrame(smoothscroll);          window.scrollTo (0,currentScroll - (currentScroll/5));     } })();

---

如果要进行平滑滚动，请尝试以下操作：

1 2 3 4

$("a").click(function() {      $("html, body").animate({ scrollTop: 0 },"slow");      return false; });

另一个解决方案是javascript window.scrollto方法：

1	window.scrollTo(x-value, y-value);

参数：

• x值是沿水平轴的像素。
• Y值是沿垂直轴的像素。

相关讨论

• 模仿…查看用户答案…这只是前两个答案的汇编…
• 这是一种使用stackoverflow的合法方法——将其放在一个位置更为实际。JoelSpolsky使用了对现有答案的重用作为一个例子，说明stackoverflow如何在一个点上工作。如果你感兴趣，我可以试着找到博客帖子

---

1 2 3 4

$("a[href='#top']").click(function() {      $("html, body").animate({ scrollTop: 0 },"slow");      return false;   });

在HTML中

1

go top

---

用window.scrollTo(0, 0);很快所以我尝试了Mark Ursino的例子，但是在Chrome中什么都没有发生。我发现了这个

1 2 3 4 5 6 7 8

$('.showPeriodMsgPopup').click(function(){     //window.scrollTo(0, 0);     $('html').animate({scrollTop:0}, 'slow');//IE, FF     $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works     $('.popupPeriod').fadeIn(1000, function(){         setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);     }); });

测试了所有3种浏览器，它都能正常工作我正在使用蓝图CSS这是当客户单击"立即预订"按钮而没有选择租赁期时，慢慢移动到日历所在的顶部，并打开一个指向2个字段的对话框DIV，在3秒钟后，该对话框将淡出。

相关讨论

• 感谢您指出您需要以HTML和正文为目标。我只是为HTML做的，想知道为什么它不能在Chrome中工作。
• 身体动画在Safari中有效，因此我会相应地更新您的答案。
• "测试了所有3个浏览器"？Midori，Luakit和Konquerror，对吧？P
• 为什么不直接做$('html'、'body').animate(scrolltop:0)而不是添加两行？

---

真的很奇怪：这个问题已经活跃了五年了，现在还没有普通的javascript来解决滚动的动画问题……所以现在开始：

1 2 3 4 5 6 7 8

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属性调用它。检查这个J小提琴

注意：这是一个非常基本的解决方案，可能不是最有效的解决方案。这里有一个非常详细的例子：https://github.com/cferdinandi/smooth-scroll

相关讨论

• 不过，这个问题明确要求jquery解决方案。所以不奇怪
• 我的最佳解决方案。没有插件，没有庞大的jquery库，只是简单的javascript。库多斯

---

许多用户建议选择HTML和body标签以实现跨浏览器兼容性，例如：

1	$('html, body').animate({ scrollTop: 0 }, callback);

不过，如果你指望回调只运行一次，这可能会让你很困惑。它实际上会运行两次，因为您选择了两个元素。

如果这对您来说是个问题，您可以这样做：

1 2 3 4 5 6 7 8

function scrollToTop(callback) {     if ($('html').scrollTop()) {         $('html').animate({ scrollTop: 0 }, callback);         return;     }     $('body').animate({ scrollTop: 0 }, callback); }

这是因为chrome $('html').scrollTop()返回0，但在其他浏览器(如firefox)中不起作用。

如果不希望在滚动条已位于顶部的情况下等待动画完成，请尝试以下操作：

1 2 3 4 5 6 7 8 9 10 11 12 13

function scrollToTop(callback) {     if ($('html').scrollTop()) {         $('html').animate({ scrollTop: 0 }, callback);         return;     }     if ($('body').scrollTop()) {         $('body').animate({ scrollTop: 0 }, callback);         return;     }     callback(); }

---

1 2 3 4

$(function(){    var scroll_pos=(0);              $('html, body').animate({scrollTop:(scroll_pos)}, '2000'); });

编辑：

1	$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

相关讨论

• 您确定动画函数中字符串的持续时间有效吗？
• 不能在animate函数中使用字符串，而应使用：$('html, body').animate({scrollTop:(scroll_pos)}, 2000);函数。

---

老江户一〔6〕能耍花招。

1	document.location.href="#top";

在FF、IE和Chrome中工作正常

相关讨论

• 好极了！有没有办法使它平滑滚动？
• 您应该避免基于导航的解决方案，请参阅sriramajeyam答案的注释。

---

试试这个

1	$(window).scrollTop(100);

---

$(document).scrollTop(0);也起作用。

相关讨论

• 请注意，如果你不使用火狐，这将不起作用。只提供一个参数时会出错(错误：参数[nsidomwindow.scrollto]不足)。

---

非jquery解决方案/纯javascript：

1	document.body.scrollTop = document.documentElement.scrollTop = 0;

---

1 2 3 4

$(".scrolltop").click(function() {   $("html, body").animate({ scrollTop: 0 },"slow");   return false; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.section{  height:400px; } .section1{   background-color: #333; } .section2{   background-color: red; } .section3{   background-color: yellow; } .section4{   background-color: green; } .scrolltop{   position:fixed;   right:10px;   bottom:10px;   color:#fff; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<html> <head> Scroll top demo <script src="https://code.jquery.com/jquery-3.3.1.js"> </head> <body> Scroll top </body> </html>

相关讨论

• 虽然这段代码可以回答这个问题，但它提供了有关如何解决问题以及为什么解决问题的信息，从而提高了它的长期价值。
• 解释你的答案！
• 在网页中，任何用户都将单击"滚动顶部"按钮，然后网页将以动画形式滚动顶部。

---

这将起作用：

window.scrollTo(0, 0);

---

试试这个代码：

1 2 3

$('html, body').animate({     scrollTop: $("div").offset().top }, time);

DIV=>DOM元素，用于移动滚动条。

时间=>毫秒，定义滚动的速度。

---

为什么不使用jquery内置函数scrolltop:

1 2 3

$('html, body').scrollTop(0);//For scrolling to top $("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

简短而简单！

相关讨论

• 你只是没找到医生的链接

---

只需使用这个脚本就可以直接滚动到顶部。

1 2 3 4 5

$(document).ready(function(){     $("button").click(function(){         ($('body').scrollTop(0));     }); });

---

你不需要jquery。你只需调用脚本

1	window.location = '#'

单击"转到顶部"按钮

样例演示：

输出jsbin.com/fakumo#

附言：当你使用像AngularJS这样的现代库时，不要使用这种方法。这可能会破坏URL哈希邦。

相关讨论

• 这在所有主要浏览器中都有效吗？
• 不幸的是，这不是最好的解决方案，因为在这种情况下，您是在物理上改变位置，而不是滚动页面。如果位置很重要，这可能会导致问题(在使用角度路由的情况下)
• @雅罗斯拉夫罗戈萨是正确的。虽然它可以在简单的情况下工作，但我不推荐这个解决方案。位置变得越来越重要，单页应用程序广泛使用哈希来处理导航。当在此之后添加基于散列的导航或者将此添加到基于散列的导航时，您将立即引入一个副作用的bug。

---

动机

这个简单的解决方案在本地工作，并实现到任何位置的平滑滚动。

它避免使用锚链接(那些带有#的链接)，在我看来，如果你想链接到一个部分，那么锚链接是有用的，但是在某些情况下，特别是当指向顶部时，锚链接会导致两个不同的URL指向同一位置(http://www.example.org和http://www.example.org/)。

解决方案

在要滚动到的标记上放置一个ID，例如第一节，它回答了这个问题，但是该ID可以放在页面的任何地方。

1 2 3 4 5

<body>   <section id="top">     <!-- your content -->   </section>   <!-- more content -->

然后，作为一个按钮，您可以使用一个链接，只需使用这样的代码编辑onclick属性。

1

Click me

其中EDOCX1[4]的参数是要在单击后滚动到的标记的ID。

相关讨论

• 谢谢你！是很好的解决方案
• @Hugostivenlagunarueda欢迎你，我在MDN上找到了它，所以多亏了Mozilla。太棒了，有多少东西已经在那里，本地支持。我喜欢香草JS。

---

如果你不想平滑滚动，你可以欺骗和停止平滑滚动动画几乎只要你启动它…像这样：

1 2 3 4 5 6 7 8 9 10

$(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对一件事情进行动画处理，但不使用动画对另一件事情进行动画处理时？在页面顶部的管理登录面板中打开一张幻灯片，然后立即跳到顶部查看。

---

您可以简单地使用链接中的目标，例如someid，其中someid是DIV的ID。

或者，您可以使用任何数量的滚动插件，使这个更优雅。

例如http://plugins.jquery.com/project/scrollto。

---

上述答案在SharePoint 2016中都不起作用。

必须这样做：https://sharepoint.stackexchange.com/questions/195870/

1 2	var w = document.getElementById("s4-workspace"); w.scrollTop = 0;

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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;     }); }

---

您可以尝试像在这个小提琴中那样使用JS http://js fiddle.net/5bnmh/1/

在页脚中添加"转到顶部"按钮：

1 2 3 4 5 6 7 8

<footer>     <hr />     <p> Just some basic footer text. </p>     <!-- Go to top Button -->     Go Top </footer>

---

试试这个

1 2 3 4 5 6 7 8 9

$(function(){    $('a').click(function(){     var href =$(this).attr("href");    $('body, html').animate({      scrollTop: $(href).offset().top      }, 1000)   });  });  ?

---

激活所有浏览器。祝你好运

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var process;         var delay = 50; //milisecond scroll top         var scrollPixel = 20; //pixel U want to change after milisecond         //Fix Undefine pageofset when using IE 8 below;         function getPapeYOfSet() {             var yOfSet = (typeof (window.pageYOffset) ==="number") ? window.pageYOffset : document.documentElement.scrollTop;             return yOfSet;         }         function backToTop() {             process = setInterval(function () {                 var yOfSet = getPapeYOfSet();                 if (yOfSet === 0) {                     clearInterval(process);                 } else {                     window.scrollBy(0, -scrollPixel);                 }             }, delay);         }

---

如果要滚动到任何具有ID的元素，请尝试以下操作：

1 2 3 4 5 6 7 8 9 10

$('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;     }); });``

---

当顶部滚动小于限制底部和底部到顶部滚动标题时，标题是粘性的。下面是小提琴的例子。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var lastScroll = 0; $(document).ready(function($) { $(window).scroll(function(){  setTimeout(function() {     var scroll = $(window).scrollTop();     if (scroll > lastScroll) {         $("header").removeClass("menu-sticky");     }     if (scroll == 0) {     $("header").removeClass("menu-sticky");     }     else if (scroll < lastScroll - 5) {         $("header").addClass("menu-sticky");     }     lastScroll = scroll;     },0);     });    });

https://jsfiddle.net/memdumusaib/d52xclm3/

---

用于滚动到元素，元素位于页面顶部

1 2 3

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));             ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);

---

试试看，不需要其他插件/框架

1 2 3 4 5 6 7 8

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction); function jarscrollfunction() {   var body = document.body; // For Safari   var html = document.documentElement; // Chrome, Firefox, IE and Opera   body.scrollTop = 0;   html.scrollTop = 0; }

1	<button id="jarscroolbtn">Scroll contents</button>

1 2 3

html, body {   scroll-behavior: smooth; }

---

document.getElementById("id of what you want to scroll to").scrollIntoView();

---

有趣的是，大多数这些对我来说根本不起作用，所以我使用jquery-scrollto.js来实现以下功能：

1 2 3 4 5 6

wrapper.find(".jumpToTop").click(function() {     $('#wrapper').ScrollTo({         duration: 0,         offsetTop: -1*$('#container').offset().top     }); });

它奏效了。$(document).scrollTop()返回了0，而这一个实际上起了作用。

---