使用JavaScript / jQuery滚动到页面顶部？

我在页面上有一个<button> ，当按下这个button时，使用jQuery显示一个隐藏的<div> 。

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

Answer 1

如果你不需要改变animation，那么你不需要使用任何特殊的插件 – 我只是使用本地JavaScript window.scrollTo方法 – 传入0,0将立即滚动页面左上angular。

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

参数

• x坐标是沿着水平轴的像素。
• y坐标是沿着垂直轴的像素。

Answer 2

如果你想平滑滚动，请尝试如下所示：

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

这将采取任何<a>标签的href="#top"并使其平滑滚动到顶部。

Answer 3

试试这个在顶部滚动

 <script> $(document).ready(function(){ $(window).scrollTop(0); }); </script> 

Answer 4

你不需要jQuery来做到这一点。 一个标准的HTML标签就足够了…

 <div id="jump_to_me"> blah blah blah </div> <a target="#jump_to_me">Click Here To Destroy The World!</a> 

Answer 5

所有这些build议都适用于各种情况。 对于那些通过searchfind这个页面的人，也可以尝试一下。 JQuery，没有插件，滚动到元素。

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

Answer 6

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

在HTML中

 <a href="#top">go top</a> 

Answer 7

平滑滚动，纯javascript：

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

Answer 8

用window.scrollTo(0, 0); 速度非常快
所以我尝试了马克乌尔西诺的例子，但在Chrome中没有任何反应
我发现了这个

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

testing了所有3个浏览器，它的工作原理
我正在使用蓝图的CSS
这是当客户点击“立即预订”button，并没有select租赁期，缓慢地移动到日历顶部，并打开一个对话框指向2个领域，3秒后它消失

Answer 9

很多 用户build议selecthtml和body标签以实现跨浏览器兼容性，如下所示：

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

这可以让你起床，虽然如果你只在你的callback运行一次。 实际上它会运行两次，因为你select了两个元素。

如果这对你是一个问题，你可以做这样的事情：

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

这个原因是在Chrome $('html').scrollTop()返回0，但不是在其他浏览器，如Firefox。

如果您不想在滚动条已经在顶部的情况下等待animation完成，请尝试以下操作：

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

Answer 10

旧的#top可以做到这一点

 document.location.href = "#top"; 

FF，IE和Chrome工作正常

Answer 11

真奇怪：这个问题已经有五年的时间了，而且还没有香草JavaScript的答案来animation滚动…所以在这里你去：

 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

注：这是一个非常基本的解决scheme，也许不是最高性能的解决scheme。 一个非常详细的例子可以在这里find： https ： //github.com/cferdinandi/smooth-scroll

Answer 12

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

Answer 13

$(document).scrollTop(0); 也有效。

Answer 14

尝试这个

 <script> $(window).scrollTop(100); </script> 

Answer 15

非jQuery解决scheme/纯JavaScript：

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

Answer 16

为什么不使用JQuery内置函数scrollTop：

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

简单而简单！

Answer 17

你不需要JQuery。 只要你可以调用脚本

 window.location = '#' 

点击“Go to top”button

示例演示：

output.jsbin.com/fakumo#

PS：不要使用这种方法，当你使用像angularjs现代的图书馆。 这可能会破坏URL hashbang。

Answer 18

试试这个代码：

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

div => Dom要移动滚动的元素。

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

Answer 19

你可以尝试使用JS在这个小提琴http://jsfiddle.net/5bNmH/1/

在页面页脚中添加“转到顶部”button：

 <footer> <hr /> <p>Just some basic footer text.</p> <!-- Go to top Button --> <a href="#" class="go-top">Go Top</a> </footer> 

Answer 20

如果你不想平滑滚动，只要你启动它就可以作弊和停止平滑的滚动animation…就像这样：

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

我不知道是否推荐/允许，但它的作品:)

你什么时候用这个？ 我不确定，但也许当你想用一个点击animationJquery的一件事，但做一个没有animation？ 即打开页面顶部的幻灯片pipe理login面板，然后立即跳转到顶部以查看它。

Answer 21

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

Answer 22

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

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

http://plugins.jquery.com/project/ScrollTo就是一个例子。;

Answer 23

尝试这个

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

Answer 24

如果你想滚动到任何带有ID的元素，试试这个：

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

Answer 25

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

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

Answer 26

当顶部滚动顶部小于限制底部和底部顶部滚动标题是粘滞。 下面请参阅小提琴示例。

 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/

Answer 27

如果你想顺利滚动，请试试这个：

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

另一个解决scheme是JavaScript window.scrollTo方法：

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

参数：

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

Answer 28

只需使用此脚本滚动到顶部直接。

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

Answer 29

滚动到位于页面顶部的元素和元素

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

Answer 30

你不需要使用任何JavaScript来做到这一点。 只需使用“＃”作为href html代码中的链接即可。

 <a href="#">Top</a>