网址中没有ID的内部链接 [英] Internal link without id in url

问题描述

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

If we need to jump to top section then we can simple write a code

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

或者只是javascript代码

or just javascript code

location.href=#top

结果:使用以下网址将我们带到首页: http://fiddle.jshell.net/_display/#top .

Result : It takes us to top page with url :http://fiddle.jshell.net/_display/#top.

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

But what my problem is, I dont' want to show /#top query on url string but i want my page to that top section . Reason why i don't want to show that string in url is, my page get stuck if browser don't find 'id' named top .Context or information which i'm displaying is inside a dialog box so that once the dialog box is closed there isn't any id named top then when user tries to refresh that page i.e http://fiddle.jshell.net/_display/#top , page gets stuck .

有人可以为这个问题提供更好的解决方案吗?

Can anyone give a better solution for this problem?

推荐答案

尝试

$(".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>

这篇关于网址中没有ID的内部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！