0

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

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

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

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

4

2 回答 2

2

使用 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 阻止链接手动重定向）和一个空表单（放在 <body> 之后）

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

然后我们将创建必要的 jquery，因此当单击带有“mymenuitem”类的 <a> 标记时，我们将对目标页面进行 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>

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

于 2013-05-20T12:56:48.787 回答
0

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

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

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

于 2013-05-23T16:52:28.617 回答