如果我们需要跳转到顶部,那么我们可以简单地编写代码
<a href="#top">link to top</a>
或只是javascript代码
location.href=#top
结果:我们将首页带到网址:http://fiddle.jshell.net/_display/#top。
但是我的问题是,我不想在url字符串上显示/ #top查询,但我希望我的页面到顶部。为什么我不想在url中显示该字符串的原因是,如果浏览器找不到名为top的.id文件,我的页面会卡住。我正在显示的文本或信息是在对话框内,以便一旦对话框已关闭没有任何名为top的id然后当用户尝试刷新该页面时http://fiddle.jshell.net/_display/#top,页面卡住了。
任何人都可以为这个问题提供更好的解决方案吗?
答案 0 :(得分:2)
你几乎没有选择......
您可以使用纯Javscript:
window.scrollTo(X, Y);
(obvisourly X和Y是滚动坐标,top是0,0)。
另一个选项(基于非jQuery)可以是:
document.body.scrollTop = document.documentElement.scrollTop = 0;
如果您更喜欢基于jQuery的解决方案,请尝试以下方法:
$(document).scrollTop(0);
或者,以及:
$(window).scrollTop(0);
使用更符合您需求的选项。
享受编码。
答案 1 :(得分:1)
尝试
$(".link").on("click", function(e) {
$("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
return false
})
&#13;
#top, #bottom {
height:400px;
width:100%;
display:block;
}
div:nth-of-type(1) {
background:blue;
}
div:nth-of-type(2) {
background:orange;
}
span {
background:yellow;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="top">top <span class="link">go to bottom</span></div>
<div id="bottom">bottom <span class="link">go to top</span></div>
&#13;
答案 2 :(得分:0)
<强> HTML 强>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
<强> Jquery的强>
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
//});
});
});