如何在不改变 URL 栏的情况下添加 HTML 哈希链接...？答案

【问题标题】：How do I add a HTML hash link without it altering the URL bar...?如何在不改变 URL 栏的情况下添加 HTML 哈希链接...？
【发布时间】：2023-12-20 09:41:01
【问题描述】：

当我将 HTML 链接添加到页面的特定部分时：

<a href="#specific">test</a>

我注意到它改变了地址栏的 URL。尽管我遇到过以这种方式链接但地址栏没有更新的网站。这怎么可能？

编辑：这可能是一个 AJAX 解决方案，如果他们在不更改 URL 的情况下使其工作，就好像我没记错一样，页面没有重新加载，它直接到达目的地......

【问题讨论】：

为什么不使用 javascript，例如window.scrollTo()?
我没有 JavaScript 知识。您能否用一个有效的 javascript 示例回答这个问题，我会对这个解决方案感到满意。
您好 Alehandro Darie，您能否介绍一下您为什么不想更改 URL 栏的背景？这样我们就可以为您构建答案。谢谢。
@AlexKey 感谢您的回复。原因是如果访问者重新加载页面或为其添加书签，它总是会转到特定的目的地。问题是我开发了一种单页类型的投资组合设计，访问者很可能会在浏览该站点后将站点添加为书签，这意味着当他们将其添加为书签并返回该站点时，他们将登陆页面的随机部分（而不是顶部）。我希望这有任何意义......
太棒了，谢谢 Alehandro，现在就为您整理一份回复。

标签： html hash hyperlink href hashtag

【解决方案1】：

您可能希望查看 jquery 插件，scrollTo。

http://jquery.com

还有几个scrollTo的链接

http://demos.flesler.com/jquery/scrollTo/

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

你可以这样做：

HTML

<a href="#scrollToMe" class="scrollLink">click me to scroll</a>
<div class="gap">a big gap</div>
<h1 id="scrollToMe">I should scroll to here without a # in the URL</h1>

javascript（jquery 和 scrollto 插件）

$(document).ready(function() {
    $(".scrollLink").click(function(e) {

        $.scrollTo($(this).attr("href"));    
        e.preventDefault();

    });

});

javascript 的作用是，当单击具有类“.scrollLink”的链接时，将页面向下滚动到具有与单击的特定链接的 href 相同 ID 的元素。然后 e.preventDefault() 停止它像普通哈希链接一样工作并停止它出现在 URL 栏中。

这是一个适合您的工作示例：http://jsfiddle.net/alexkey/c3jsY/7/

还有一个不在框架集中的版本，所以你可以看到 URL 没有改变：

http://fiddle.jshell.net/alexkey/c3jsY/7/show/light/

这种方法有几个优点

只需将 scrollLink 类应用到您想要阻止哈希出现的链接（既简单又好用）
它使用普通的href，这也意味着即使禁用了javascript，链接仍然可以工作——有利于可访问性，可能还有搜索引擎优化。

【讨论】：

请帮助@AlehandroDarie，很高兴能提供帮助。 :-)

【解决方案2】：

可以使用 javascript 拦截点击事件，执行你自己的自定义逻辑，然后取消导航事件，这样 URL 就不会改变

【讨论】：

您能否给我写下这个解决方案的代码？请注意，不幸的是，我没有 JavaScript 知识，只有基本的 HTML。

【解决方案3】：

也许您可以尝试以下方法：window.scroll(0,150); 而不是 "(0,150)" 放置你的目标的坐标。

【讨论】：

【解决方案4】：

您必须尝试使用数字（此处显示为 200）才能使窗口正确对齐。

<a href="javascript:void(0);" onclick="window.scroll(0,200);">test</a>

【讨论】：

如果我将它正确对齐，所有浏览器上的目标是否完全相同？正如我之前提到的，我对 javascript 不是很有经验，因此不知道它在哪些规则下运行。

【解决方案5】：

你可以使用内联的下一个代码：

<a href="javascript:void(0);" onclick="document.getElementById(\'bookmark\').scrollIntoView();"> link text </a>
<div id="bookmark">Jump to here</div>

【讨论】：