我已经检查了这里的其他帖子，没有找到我要找的结果。 我要点击
<a href="#about">About</a>
<div id="about">Content of this..</div>
让它滚动到那个元素而不在地址栏中输入 www.domain.com/#about
作为一个完美的例子，请查看我在 here 上找到的这个网站，然后单击一些链接——单击时它们不会更改地址栏。
你可以使用 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>
自己玩过这个，这里是我对这个主题的学习总结。
这是基本的链接命令：
<A HREF="#codeword">Blue Words</A>
这里是你如何表示跳转将滚动页面的位置：
<A NAME="codeword">
这是正在发生的事情
A HREF 命令与基本链接相同，只是链接指向代码字而不是 URL。
请注意密码前有一个#号。你需要它来表示它是一个内部链接。如果没有 # 符号，浏览器会在以您的代码字命名的页面之外查找内容。
您的“代码字”可以是您想要的任何内容。我尽力保持简短，并使其表示要跳转到的内容。您可以使用的字母数量可能有限制——但我还没有找到它。
页面跳转点遵循相同的通用格式，只是您将 HREF 一词替换为 NAME。
请注意，NAME 命令中没有 # 符号。
注意！您放置 NAME 目标的位置将出现在屏幕浏览器的顶部。
希望有帮助。
window.location.hash = ""
是我能找到的可能方式。
hash#//不要使用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 }); });
一种可能的解决方法是使用
<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。
对我来说，只插入“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>
（这适用于页面上的所有锚链接。）
我尝试使用 MutationObserver 监视
window.location.hash所以现在我正在使用 window.onpopstate() eventListener:
var flag_onpopstate=false; // use this global flag to prevent recursion
window.onpopstate = () => {
if (flag_onpopstate) return;
flag_onpopstate = true;
window.location.hash = "";
flag_onpopstate = false;
}
每次活动历史条目在同一文档的两个历史条目之间更改时，都会将
popstate最好的选择是使用 scrollIntoView。
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
给你想做标签的元素添加一个点击事件，然后像这样处理点击：
const handleClickScroll = () => {
const element = document.getElementById('section-1');
if (element) {
// 👇 Will scroll smoothly to the top of the next section
element.scrollIntoView({ behavior: 'smooth' });
}
};
这篇文章解决了我的问题，而且实施起来非常简单。