Question

我在这里检查过其他帖子，没有找到我正在寻找的结果。我想点击

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

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

作为一个完美的例子，请查看我找到here的网站，然后点击一些链接 - 点击时不要更改地址栏。

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

Answer 2

window.location.hash = ""

是我能找到的可能方式。

hash会在#旁边显示字符串。

Answer 3

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

这是基本的链接命令：

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

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

<A NAME="codeword">

这是发生了什么

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

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

您的“代码字”可以是您想要的任何内容。我尽力保持它的简短，并使它表示它跳到了什么。可以使用的字母数量可能有限 - 但我还没有找到它。

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

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

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

希望它有所帮助。

Answer 4

//不要使用a，使用类

 $(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  }); });

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

通过这种方式，锚链接不会影响URL。

单击锚点链接时，保持URL不受影响

5 个答案: