Question

这是我的困境。我有三个链接从一个页面转到另一个页面并将访问者带到其各自的DIV ID：

www.mysite.com/#about
www.mysite.com/#gallery
www.mysite.com/#help

它工作正常，但我真的需要从URL中删除尾随的主题标签，或者它与jquery库滑块混淆。这可能吗？我见过其他人提出类似的问题，但他们似乎没有导航到新的页面。

我正在寻找的是访问者点击链接的方式（例如，www.mysite.com/#about）并被带到该页面（和相应的元素），但浏览器会关闭{{1}并且只报告#about。

Jquery，PHP，javascript，我真的不在乎。

我在想另一种方法是将用户带到www.mysite.com，然后再应用标签。这是可能吗？就这样他们被带到了元素，但浏览器中的url没有反映主题标签。

PS：我不是编码器，所以如果有一些代码可以做到这一点，你们真的可以清楚如何实现吗？

非常感谢。

Answer 1

我们可以使用history api。

首先，我们检查堆栈中是否存在状态。无论状态如何都是我们推入堆栈的最新项目。

我们假设元素的id与hash相同。我们将其用作div上的选择器并获取div offset().top。

if(history.state){  
    $('html, body').scrollTop($('div[id='+history.state.element+']').offset().top); 
}

现在让我们来看看点击功能。我们阻止默认行为并将href存储在变量中（因为我们将使用它几次）。我们将状态推入堆栈。 element密钥的值为whatever comes after the hash tag。我们还提供了有关堆叠状态的一些其他信息。完成后，我们只需将页面位置重定向到元素的位置without哈希标记。

$('a').on('click', function(e){
    e.preventDefault();

    var ele =  $(this).prop('href');
    window.history.pushState({'element' : ele.split('#')[1]}, ele, ele.split('#')[0]);

    window.location = ele.split('#')[0]; 
});

现在当下一页加载时，历史记录将有一个状态，这将是最近推送的堆栈。这将模仿你想要的行为。

Answer 2

这是jQuery中的一个很好的解决方案：

http://demos.flesler.com/jquery/scrollTo/

从URL中删除主题标签但仍跳转到该元素

2 个答案: