从 url 中删除哈希 id答案

【问题标题】：Remove hash id from url从 url 中删除哈希 id
【发布时间】：2013-05-15 00:46:56
【问题描述】：

我有一个菜单标题，当您单击其中一个菜单链接时，它会在找到相关的 div id 名称时指向另一个页面（我想要的）。我想知道是否有办法再次清理 url，使其不包含我的 url 中的#id？尝试了 window.location 哈希，这会破坏它的滚动并将 # 留在 url 中。这是我所拥有的：

在我的菜单中：<li><a href="about#scroll-to" ....

在about页面上，它向下滚动到一个名为#scroll-to..<div id="scroll-to"></div>的div

任何建议都会很棒。谢谢！

【问题讨论】：

这可能比它的价值要麻烦得多，但你可以使用History.js 来解决这个问题。

标签： url scroll

【解决方案1】：

使用 jquery，您可以在单击菜单时对目标页面进行 POST 调用。

POST 数据将包含您要滑动到的 div 的 id。

在您的目标页面上，使用您的服务器语言（php、asp）在 js 变量中输出该 ID，并使用 jquery 将该 ID 输出到文档就绪幻灯片上。

然后你将有一个干净的 url，页面滚动到你的 div。

---- 编辑：代码来了！

当单击菜单项时，让我们使用 jquery 对目标页面进行 POST。我们将添加一个类，比如说“mymenuitem”。我们将把这个类添加到菜单中的链接中。所以我们会有

<li><a href="YOURTARGETPAGE.HTML#scroll-to" onClick="javascript:return false;" class="mymenuitem">Information about us</a></li>

（onClick 阻止链接手动重定向）和一个空表格（放在

之后）

<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>

然后我们将创建必要的 jquery，因此当单击带有“mymenuitem”类的标记时，我们将对目标页面进行 POST。

<script type="text/javascript">
jQuery(document).ready(function(){
    $(".mymenuitem").click(function() {

    // we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
    var the_anchor_id_to_scroll_to =  $(this).attr("href").split('#')[1]; 

    // lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)

    $("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
    $("#slidinganchorform").submit();
    });
});
</script>

然后在我们的 YOURTARGETPAGE.HTML 中，我们将有类似的内容（假设我们使用 php）

<head>

<!-- make sure your jquery is loaded ;) -->

<?php 
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
    // lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
    var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
    // Lets scroll
    jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>

确保必须存在正确的 id ;)

<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>

（删除你的旧代码，因为我更改了一些变量名，如果有以前版本的部分，将很难调试。从头开始编写所有内容）

【讨论】：

嘿，我已经尝试了你的 sn-p，这就是发生的事情......只有当我在目标页面上然后再次单击链接时，它才能工作并缓慢滚动到 id （所以我们知道该功能有效）但如果我不在目标页面上并单击“目标链接”，#scroll-to 仍会显示在 url 中并跳转到 ID。奇怪的是，我已经测试过以确保我们可以看到它只在目标页面上有效。您对可能出现的问题有什么建议吗？我还提醒了变量等等，一切似乎都很好:)
@user2212564 请再次查看开头的代码。我改变了它，它现在可以工作了。显然以前版本的 jquery 非 ajax 发布不起作用。这个应该工作:)
嘿，试一试——银行假期我一直不在办公桌前。您的代码对我来说很有意义并且有效，也感谢您对代码的 cmets。回顾并了解事情的完成方式和方式非常棒。也为耐心 +1。
很高兴为您提供帮助并让您理解 :)

【解决方案2】：

您可以在新页面加载时执行此操作

history.pushState("", document.title, window.location.pathname);

但是它也会删除查询字符串。虽然，你可以玩一点来保持它

【讨论】：