从网址中移除哈希标签，但仍然跳转到该元素 [英] Remove hashtags from a URL but still jump to the element

问题描述

这是我的困境。我有三个链接从一个页面转到另一个页面，并将访客分配给各自的DIV ID：

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

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

我在寻找的是访问者点击的方式（例如 www.mysite.com/#about ），然后转到该页面（以及相应的元素），但让浏览器修剪 #about 并只报告 www.mysite.com 。

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

我想另一种方法是将用户带到www.mysite.com，然后应用标签。这是可能吗？只是这样他们被带到元素，但浏览器中的网址并不反映标签。

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

非常感谢。

解决方案

我们可以使用历史记录api 。首先，我们检查是否堆栈中有一个状态。无论状态如何，都将是我们推入堆栈的最新项目。

我们假设元素的 id 与 hash相同

code>。我们在 div 中使用它作为选择器，并获得该div offset（）。top 。

  if（history.state）{
 $（'html，body'）。scrollTop（$（'div [id ='+ 。history.state.element + ']'）的偏移量（）顶部）。 
} 
  

现在我们来看看点击功能。我们阻止默认行为并将href存储在变量中（因为我们将使用它几次）。我们将状态推入堆栈。 元素键的值为，不管是在哈希标记之后。我们还提供一些关于堆叠状态的其他信息。当我们完成后，我们只需将页面位置重定向到元素的位置，而不用哈希标记。 （'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];
}）;


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

Here's my predicament. I have three links from one page that go to another one and take the visitor to its respective DIV id:

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

It's working fine, but I really need to remove the trailing hashtags from the URL or it messes with a jquery gallery slider. Is this possible? I've seen others asking similar questions but they don't seem to be navigating to a new page.

What I am looking for is a way for a visitor to click on the link (e.g., www.mysite.com/#about) and be taken to that page (and respective element) but have the browser trim off the #about and just report www.mysite.com.

Jquery, PHP, javascript, I don't care what really.

I was thinking another alternative would be to take the user to www.mysite.com and then apply the hashtag afterwards. Is this at all possible? Just so they are taken to the element but the url in the browser doesn't reflect the hashtag.

PS: I'm no coder so if there is a bit of code that can do this, can you guys be really clear on how to implement?

Many thanks.

解决方案

We can use the history api.

First, we check if there's a state in the stack. Whatever the state is will be the most recent item we pushed into the stack.

We assume that the id of the element is the same as the hash. We use it as a selector on our div and get that divs offset().top.

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

Now let's take a look at the click function. We prevent the default behavior and store the href in a variable (because we'll use it a few times). We push a state into the stack. The element key has a value of whatever comes after the hash tag. We also provide some other information about the stacked state. When we're done, we simply redirect the page location to the element's location without the hash tag.

$('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]; 
});

Now when the next page loads, the history wlil have a state, which will be the most recent stack pushed. This will emulate the behavior you desire.

这篇关于从网址中移除哈希标签，但仍然跳转到该元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！