单击锚链接时保持 URL 不受影响答案

【问题标题】：Keep URL unaffected when anchor link is clicked单击锚链接时保持 URL 不受影响
【发布时间】：2022-01-26 12:43:15
【问题描述】：

我已经检查了这里的其他帖子，没有我正在寻找的结果。我要点击

<a href="#about">About</a>
<div id="about">Content of this..</div>

并让它滚动到该元素，而不将 www.domain.com/#about 放在地址栏中

作为一个完美的例子，请查看我找到的这个网站 here 并点击一些链接——点击时它们不会改变地址栏。

【问题讨论】：

您需要使用 JavaScript 来阻止默认行为。
@Blender 你能说得更具体点吗？我不确定如何实现。

标签： html href address-bar

【解决方案1】：

你可以用javascript和jquery做你想做的事，下面的例子（注意这是使用旧版本的jquery）：

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <script type='text/javascript'>
    jQuery(document).ready(function($) {

        $(".scroll").click(function(event){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
        });
    });
    </script>
</head>
<body>
    <a class="scroll" href="#codeword">Blue Words</a>
    <div id="codeword"></div>
</body>
</html>

【讨论】：

具体是 event.preventDefault();这样做----没有你得到一个恼人的闪光，它最终会滚动到那个地方......所以我认为不更新URL是无意的。 [我认为这也很糟糕：通过超链接到达特定部分，天真的用户无法单击另一个部分并复制相关的更新 URL 以传递；在其他地方滚动后，刷新后我又回到了其他地方。]

【解决方案2】：

我自己玩过这个，这里是我在这个主题上的学习总结。

这是基本的链接命令：

<A HREF="#codeword">Blue Words</A>

以下是您如何表示跳转将滚动页面的位置：

<A NAME="codeword">

这是发生了什么

A HREF 命令与基本链接相同，只是链接指向的是代码字而不是 URL。

请注意代码字前面有一个# 符号。你需要它来表示它是一个内部链接。如果没有 # 符号，浏览器会在以您的代码字命名的页面之外查找内容。

您的“代码字”可以是您想要的任何东西。我尽量保持简短，并让它表示它正在跳转到的内容。您可以使用的字母数量可能有限制——但我还没有找到。

页面将跳转的点遵循相同的一般格式，除了您将单词 HREF 替换为单词 NAME。

请注意，NAME 命令中没有#号。

注意！您放置 NAME 目标的位置将显示在屏幕浏览器的顶部。

希望对你有帮助。

【讨论】：

【解决方案3】：

window.location.hash = ""

是我能找到的可能方式。

hash 给出# 旁边的字符串。

【讨论】：

您能否详细说明这个答案？我不知道您的确切意思。所以你有#旁边的部分，然后呢？我不知道这与单击锚链接时保持 URL 不受影响有什么关系。也许像 OP 这样的简单示例？
就我而言，我必须在锚点之前显示部分 URL，以使 URL 看起来更漂亮。所以我想截断锚链接。 window.location 对象存储 URL 部分。 w3schools.com/js/js_window_location.asp 。 # 后面的 URL patrt 分配给 window.location.hash。所以我给它分配了空值，所以我只能显示部分 URL。
@Invest 你能解释一下投反对票的理由吗？
正是@Invest，当您单击锚点时，href 会添加在#（哈希）之后。因此，如果您在单击锚点后执行 window.location.hash = "" ，则 URL 中的 href 将被空字符串替换。希望这次我清楚了。
是的，首先它将页面滚动到内部链接，然后设置window.location.hash = ""。

【解决方案4】：

//不使用a，使用class

 $(document).ready(function(){
 $(".mouse").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();
 // Store hash
  var hash = this.hash;
 // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes 
 to scroll to the specified area
  $('html, body').animate({
    scrollTop: $("#section").offset().top
  }, 800, function(){
   // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = "";
  });
} // End if  }); });

【讨论】：

【解决方案5】：

一种可能的解决方法是使用<button> 而不是<a>。

所以而不是......

<a href="#about">About</a>
<div id="about">Content of this..</div>

...你可以改成

<button href="#about">About</button>
<div id="about">Content of this..</div>

这样锚链接不会影响网址。

【讨论】：

【解决方案6】：

对我来说，只插入“return false;”解决了这个问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" async></script>
<script>
jQuery(document).ready(function($) {
    $('a[href^=#]:not(a[href=#])').click(function() {
        $('html, body').animate({scrollTop: $(this.hash).offset().top}, 1300, 'easeInOutExpo');
        return false;
    });
});
</script>

（这适用于页面上的所有锚链接。）

【讨论】：