jQuery 如何在单击按钮时滚动回页面顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19311301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll back to the top of page on button click?
提问by user2869761
I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?
我正在使用对象标记代码创建我的产品页面，但每次单击“查看”按钮时，下一页都停留在我刚刚查看的上一页的相同位置。如何添加让我每次单击“查看”按钮时都能从页面顶部查看的功能？
<div id="container" class="clearfix"><!--! end of #sidebar -->
<div class="holder"></div>
<div id="content" class="defaults"><!-- navigation holder -->
<div id="title2">Office Section</div>
<!-- item container -->
<ul id="itemContainer">
<li>
<div id="product">
<div id="title">FuBang?</div>
<div class="imageOuter" style="margin:0">
<a class="image" href="officesection010.html">
<span class="rollover" ></span>
<img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
</a>
</div><br />
<div id="text">Sofa </div><br />
<div id="button">
<a href="officesection010.html">View Details</a>
</div>
</div>
</li>
</ul>
<br />
<div id="title2"></div>
<div class="holder"></div>
</div>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/
当我单击此处特定位置“x”处的“查看详细信息”按钮时：http: //postimg.org/image/vgs0lwhtr/
The next page shows the same position "x", but I want it to jump to the top of page: http://postimg.org/image/vn80e2lph/
下一页显示相同的位置“x”，但我希望它跳到页面顶部：http: //postimg.org/image/vn80e2lph/
回答by S. S. Rawat
Using Javascript:
使用 JavaScript：
document.body.scrollTop = document.documentElement.scrollTop = 0;
Using jQuery:
使用jQuery：
$(function() {
$('body').scrollTop(0);
});
回答by Chirag Arvadia
<a href="#" ID="backToTop"></a>
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
please refere this, may this help
请参考这个，这可能有帮助
回答by Parth Panchal
Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.
如果您当前的内容是通过 jQuery 生成的（就像我的情况一样），有时将滚动到正文不起作用。在这种情况下，您可以执行以下操作。
$(function() {
$('html').scrollTop(0);
});
回答by Amir Saleem
Back to top button, works in all browsers.To change the scroll speed simply change the xin counter -= xhere x = 10
返回顶部按钮，适用于所有浏览器。要更改滚动速度，只需x在counter -= x此处更改x = 10
function scrollToTop(){
var myBody = document.body;
var id = setInterval(secondFunction,1);
var height = window.pageYOffset;
var counter = height;
function secondFunction(){
if(window.pageYOffset == 0){
clearInterval(id);
}
else {
if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
counter -= 10;
counter--;
document.documentElement.scrollTop = counter;
}
else {
counter -= 10;
counter--;
myBody.scrollTop = counter;
}
}
}
}body {
height: 5000px;
margin: 0;
padding: 0;
}
.backToTop {
position: fixed;
/* Fixed at page */
top: auto;
bottom: 20px;
left: auto;
right: 20px;
background-color: crimson;
color: white;
padding: 5px;
cursor: pointer;
}
header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>回答by Vinay Pratap Singh
Simple HTML solution for jumping between page parts
用于在页面部分之间跳转的简单 HTML 解决方案
// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>
// you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right
<a href="#top">last</a>
回答by Michael Zalla
A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready()in order for your $('body')selector to work. The readyevent may not fire before parts of your page have been rendered to the screen.
Subhash 的 jQuery 解决方案的一个小问题是您必须在其中调用此代码$(document).ready()才能使$('body')选择器工作。ready在页面的某些部分呈现到屏幕之前，该事件可能不会触发。
An better approach is to simply modify the user's location as a work-around to this browser 'feature':
更好的方法是简单地修改用户的位置，作为此浏览器“功能”的变通方法：
//Above all of your $(document).ready(...) code
document.location = "#";
回答by Satyam Saxena
Assign an id="#body" and tabindex in the <body>tag
在<body>标签中分配一个 id="#body" 和 tabindex
<body id="#body" tabindex="1">
and use jquery focus()
并使用 jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}
回答by Alberto Cerqueira
You can use this method:
您可以使用此方法：
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}
