菜单有锚链接javascript或jquery

时间:2018-03-10 08:50:45

标签: javascript jquery html

我在链接中找到了带锚点的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/

我正在寻求帮助怎么做?

1 个答案:

答案 0 :(得分:0)

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>