【问题标题】: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】:

      一种可能的解决方法是使用&lt;button&gt; 而不是&lt;a&gt;。

      所以而不是......

      <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>
        

        (这适用于页面上的所有锚链接。)

        【讨论】:

          猜你喜欢
          • 2014-03-20
          • 1970-01-01
          • 2013-02-08
          • 2014-06-17
          • 2014-07-12
          • 1970-01-01
          • 1970-01-01
          • 2013-10-29
          相关资源
          最近更新 更多