Question

我有一个菜单标题，当你点击其中一个菜单链接时，它会指向另一个页面的一半（我想要的），因为它找到了相关的div id名称。我想知道是否有办法再次清理网址，所以它不包括我的网址中的#id？尝试使用window.location哈希，这会将其从滚动中分离出来并将＃留在网址中。这就是我所拥有的：

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

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

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

Answer 1

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

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

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

然后你会有一个干净的网址，页面滚动到你的div。

----编辑：这里是代码！

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

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

（onClick停止手动重定向的链接）和一个空表格（把它放在＆lt; body＆gt;之后）

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

然后我们将创建必要的jquery，所以当＆lt; a＆gt;单击“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>

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

Answer 2

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

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

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

从url中删除哈希id

2 个答案: