锚链接让我跳转到 Xenforo 中的文档根目录答案

【问题标题】：Anchor link jumping me to document root in Xenforo锚链接让我跳转到 Xenforo 中的文档根目录
【发布时间】：2019-09-20 15:28:57
【问题描述】：

我有一个问题应该是一个非常简单的任务：创建一个 BBCode 标记来创建一个文本锚，并创建另一个来跳转到该文本锚。

但是，发生了一些事情，这导致我的锚点跳转到网站的根目录。

这是由 BBCode 生成的 HTML：

<div id="section1">Section Header</div>
<a href="#section1">Goto Section Header</a>

但是，当它在实时页面中时，单击它将跳转到网站的根目录而不是当前页面。这是在 Firefox 和 Chrome 中测试的。我不知道我错过了什么。

这是一个使用 BBCode 的实时示例页面（锚点源中的文本搜索 section1）。 http://community.playstarbound.com/index.php?help/bb-codes

如您所见，点击“Goto”下的链接将带您到http://community.playstarbound.com/#section1，而不是预期的http://community.playstarbound.com/index.php?help/bb-codes#section1。

这个 div 和锚标记是否有任何外部因素会导致这种情况？

【问题讨论】：

该页面似乎包含两个带有id="section1" 的元素。由于 ID 应该是唯一的，这可能会使浏览器感到困惑。
这是一个不幸的错误，但在这里也不起作用：community.playstarbound.com/index.php?threads/…
查看我的更新答案。

标签： html anchor

【解决方案1】：

问题

浏览器似乎无法正确识别您网页的基本 URL。因此，您的锚链接的相对 URL 当前被浏览器解释为

http://community.playstarbound.com/#some-anchor

实际上它的实际 URL 应该是

http://community.playstarbound.com/index.php?threads/expand-the-bb-code-selection.15492/#some-anchor

由于链接的 URL 与当前页面的 URL 不同，它会导致浏览器将其视为常规链接，而不是当前页面中的内部锚点，从而将您重定向到站点的根目录。

解决方案

在锚链接中指定绝对路径。
编辑：按照您的建议，更正您网站的base 标记中指定的值。

【讨论】：

好的，感谢您的回答。 Xenforo 似乎在文档中添加了<base> 标签，这就是我遇到这些问题的原因。

【解决方案2】：

我是如何解决的：

我无法更正base 标记中指定的值。而且我无法指定绝对路径。相反，我做了一点 JavaScript 魔术。

<a href="javascript:;" onclick="window.location.hash = 'some-anchor';">

这解决了我的问题。

【讨论】：

【解决方案3】：

我们许多人在前 MVC 世界中使用的页内锚点肯定会导致 MVC 中的 PITA。我使用了两种不同的修复方法：

如果您只是使用“href=#”并且不需要它在任何地方导航，那么请使用 jquery“e.preventDefault”。如：

$('(Your attribute, class, and/or ID) a).click(function (e) {
  //whatever else you might want to do, i.e. highlight,etc...
  e.preventDefault(); //Prevent in-page anchor from navigating to root of site
});

（我已经在脚本中看到了足够多的 "href='#' "，所以我不再问了，也不再问我为什么了）。

如果您想在页面中的其他位置导航，请添加一个类似的 jQuery，但不是 e.preventDefault()，而是“返回 false；”。例如，如果您有一个项目 <span><a class="fa fa-arrow-down down-to-bottom" href="#footer">&nbsp;down</a></span> 需要转到页面底部，这将执行此操作并且不应该将您扔到“根”：

$('.down-to-bottom').click(function () {
    $('html, body').animate({
      scrollTop: $(document).height()
    }, 1500, 'easeInOutExpo');
    return false;
});

修改它但是你想去底部以外的某个地方（比如另一个“div”）——只要确保“return false;”。

其中任何一个都可以在“香草”javascript 中完成。我通常使用 jQuery，因为它对我和其他许多人来说更容易。

【讨论】：