如何使用js在url中隐藏#hash答案

【问题标题】：How to hide # hash in a url using js如何使用js在url中隐藏#hash
【发布时间】：2015-05-14 02:54:48
【问题描述】：

我有一个滚动插件，它使用我的 div ID 滚动到特定的锚点，

它正在创建这样的网址：http://example.com/#examplediv|700

我想找到一种方法，使用 js 或任何其他建议的方法来隐藏 url 中的哈希

我想将这个：http://example.com/#examplediv|700 转换成这个：http://example.com/

有什么想法吗？

【问题讨论】：

标签： javascript jquery html css url-rewriting

【解决方案1】：

您可以修改您正在使用的滚动插件，也可以自己添加它，但您需要执行以下操作：

假设：您关心的与此滚动有关的所有 DIV 都需要具有 anchor-scrolls 类。

HTML

<a href="#anchor-hash" class="anchor-scrolls">foo</a>

//using jQuery
(function($){
   $('.anchor-scrolls').on('click', function(evt){
      evt.preventDefault(); //prevents hash from being append to the url
   });
)(window.jQuery);

【讨论】：

【解决方案2】：

哈希在location.hash 属性中。只需将其设置为空字符串。如果您需要在其余代码中使用它，可以先将其保存在另一个变量中。

var saved_hash = location.hash;
location.hash = '';

【讨论】：

这不会“隐藏它”，但是会删除它（如果您的应用程序不再需要它，这可能很好）。
我的应用程序需要它，但我只是不希望它显示在浏览器 url 中
您可以在更改位置之前将其保存在另一个变量中。
@Barmar 能否举个例子，我还是个 js 新手

【解决方案3】：

你可以删除它，保存它并滚动到锚点，效果相同。

// Add smooth scrolling to links
$(".anchor-link").on('click', function(event) {

 // Prevent default anchor click behavior
 event.preventDefault();

 // Store hash
 var hash = this.hash;

 // Using jQuery's animate() method to add page scroll
 // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 $('html, body').animate({
   scrollTop: $(hash).offset().top
 }, 800);

});

但仅适用于同一页面的锚点。如果锚点在不同的页面怎么办？

【讨论】：