带有锚链接javascript或jquery的菜单

Question

我在链接中找到了带有锚点的jquery代码。

jQuery (document) .ready (function () {
    jQuery ("a"). on ('click', function (event) {
        if (this.hash !== "") {
            event.preventDefault ();
            var hash = this.hash;
            jQuery ('html, body'). animate ({scrollTop: jQuery(hash).offset ().top}, 800, function () {
              window.location.hash = hash;
            });
        }
    });
});

我的菜单在锚点上作为一个页面工作，但是在那里有另一个链接，该链接指向另一个子页面，在单击带有锚点的链接后，我必须使用斜杠/返回带有锚点链接的单个页面。 我希望在页面的地址栏中看不到锚链接，而只能看到主页地址本身，但是该链接将被定向到带有锚的页面上的适当部分。

我的菜单：

<ul id = "categories" class="nav navbar-nav">
 <li><a href="/#anchor1">Anchor 1</a></li>
 <li><a href="/#anchor2">Anchor 2</a></li>
 <li><a href="/#anchor3">Anchor 3</a></li>
 <li><a href="new_page.html">New page</a></li>
</ul>

浏览器中的地址栏：

http://example.com/#anchor1

我想在单击锚菜单后将链接移到锚站点，但将锚的名称隐藏在地址中：

http://example.com/

我正在寻求帮助怎么办？

Answer 1

1.您需要删除此行：-

window.location.hash = hash;

从您的代码中，将哈希部分添加到URL。

代码必须是：

<script>
jQuery (document) .ready (function () {
  jQuery ("a"). on ('click', function (event) {
    if (this.hash !== "") {
      event.preventDefault ();
      var hash = this.hash;
      jQuery('html, body').animate({scrollTop: jQuery(hash).offset ().top}, 800);
    }
  });
});
</script>