11

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

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

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

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

4

6 回答 6

3

你可以使用 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>
于 2014-11-09T18:44:20.903 回答
1

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

这是基本的链接命令：

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

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

<A NAME="codeword">

这是正在发生的事情

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

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

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

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

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

笔记！您放置 NAME 目标的位置将出现在屏幕浏览器的顶部。

希望能帮助到你。

于 2013-06-09T18:15:15.690 回答
1 
window.location.hash = ""

是我能找到的可能方式。

hash给出 . 旁边的字符串#。

于 2016-03-08T10:23:08.433 回答
0

一种可能的解决方法是使用 a<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。

于 2019-06-12T21:57:14.380 回答
0

//不使用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  }); });
于 2017-07-03T12:30:33.373 回答
0

对我来说，只插入“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>

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

于 2022-01-27T18:03:00.267 回答