url 中没有 ID 的内部 link

Question

如果我们需要跳转到顶部那么我们可以简单地写一个代码

<a href="#top">link to top</a>

或者只是 javascript 代码

location.href=#top

结果：它带我们到首页 url :http://fiddle.jshell.net/_display/#top.

但我的问题是，我不想在 url 字符串上显示 /#top 查询，但我希望我的页面位于顶部部分。我不想在 url 中显示该字符串的原因是，如果浏览器找不到名为 top 的 'id'，我的页面就会卡住。我正在显示的上下文或信息在对话框中因此，一旦对话框关闭，就没有任何名为 top 的 id，然后当用户尝试刷新该页面时，即 http://fiddle.jshell.net/_display/#top，页面会卡住。

谁能给出更好的解决方案？

Answer 1

你几乎没有选择...

您可以使用纯 Javscript：

window.scrollTo(X, Y);（显然 X 和 Y 是滚动坐标，top 将为 0,0）。

另一种选择（但不基于jQuery）可以是：

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

如果您更喜欢基于 jQuery 的解决方案，请尝试以下操作：

$(document).scrollTop(0);

或者，还有：

$(window).scrollTop(0);

使用更适合您需要的选项。

享受编码。

Answer 2

尝试

$(".link").on("click", function(e) {
  $("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
  return false
})

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

<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>

Answer 3

Demo Here

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

url 中没有 ID 的内部 link

Internal link without id in url

html

javascript

jquery

hyperlink