我正在使用对象标记代码创建我的产品页面,但每次单击“查看”按钮时,下一页都会停留在我刚看过的上一页的相同位置。如何在每次单击“查看”按钮时添加允许我从页面顶部查看的功能?
<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 -->
当我点击特定位置“x”处的“查看详细信息”按钮时:http://postimg.org/image/vgs0lwhtr/
下一页显示相同的位置“x”,但我希望它跳转到页面顶部: http://postimg.org/image/vn80e2lph/
答案 0 :(得分:12)
使用Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
使用jQuery:
$(function() {
$('body').scrollTop(0);
});
答案 1 :(得分:3)
<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;
});
});
请参考this,请帮忙
答案 2 :(得分:3)
如果您当前的内容是通过jQuery生成的(如我的情况那样),有时将滚动放到body上是行不通的。在这种情况下,你可以做以下。
$(function() {
$('html').scrollTop(0);
});
答案 3 :(得分:3)
返回页首按钮,适用于所有浏览器。若要更改滚动速度,只需更改此处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;
}
}
}
}
&#13;
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;
}
&#13;
<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>
&#13;
答案 4 :(得分:1)
Subhash的jQuery解决方案的一个小问题是,您必须在$(document).ready()
中调用此代码才能使$('body')
选择器正常工作。在页面的某些部分呈现到屏幕之前,ready
事件可能无法触发。
更好的方法是简单地修改用户的位置,作为此浏览器“功能”的解决方法:
//Above all of your $(document).ready(...) code
document.location = "#";
答案 5 :(得分:1)
用于在页面部分之间跳转的简单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>
答案 6 :(得分:0)
在<body>
标记
<body id="#body" tabindex="1">
并使用jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}
答案 7 :(得分:0)
您可以使用此方法:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}