Question

我有一个长页面并使用菜单使用锚标签导航到它的不同部分但是，这会记录在浏览器历史记录中。因此，“返回”只会让您在页面中移动，而不会返回到之前的“真实”页面。

如何使用此功能而不是在浏览器历史记录中记录 - 可能使用jQuery或类似功能，甚至可能不使用#anchor标签本身更新URL？

我正在用HTML5编码。

这是菜单代码：

<div class="entry_jump_menu clearfix">
 <ul class="basic_menu">
  <li><a href="entry_about" class="entry_page_anchor_menu menu_about">About</a></li>
  ....
 </ul> 
</div>

和锚：

 <div id="entry_about ...>
  ... some content ...
 </div>

我无法让下面的代码完全正常工作，所以我改用了它。

/**
 * ANCHOR TAGS WITHOUT HISTORY
 */   
$('.entry_page_anchor_menu').click(function(){
    var jump = $(this).attr('href');
    var new_position = $('#'+jump).offset();
    window.scrollTo(new_position.left,new_position.top);
    return false;
});

非常感谢大卫的努力。遗憾的是我根本无法工作。

Answer 1

嗯，你的jQuery对我来说似乎是可行的。通过一些小的修改我创建了这个：

$(function(){
    $('.entry_page_anchor_menu').click(function(e){
        e.preventDefault();
        var jump = $(this).attr('href').substring(1);
        var new_position = $('#'+jump).offset();
        window.scrollTo(new_position.left,new_position.top);
    });
});

它允许您使用标准的锚书签（#whatever），它会很好地降级。我在 jsFiddle 中为您提供了代码。

基于没有浏览器历史记录的锚标记的页面导航（在页面内）（或#anchor附加到url）

1 个答案: