Javascript 内联 onclick 转到本地锚点答案

【问题标题】：Javascript inline onclick goto local anchorJavascript 内联 onclick 转到本地锚点
【发布时间】：2012-08-05 09:22:41
【问题描述】：

我有一个按钮作为图像...

<img src="button.png" />

我在 onclick 中需要一些 javascript，单击时它将导航到本地锚点。例如：

<img src="button.png" onclick="navigateTo #page10" />

我该怎么做？

更新：这是我正在使用的代码：

onclick="document.location=#goToPage';return false;"

【问题讨论】：

你看到这个答案了吗？也许它有帮助stackoverflow.com/questions/8908191/…
是否有理由不将图像包装在超链接中？
是的，原因是我正在使用 JQuery Mobile，它会自动将类添加到标题中的
如果您使用 jQuery（或者想通过设置顶部位置以真正手动的方式进行操作），另请参阅 stackoverflow.com/q/41624778/32453，还包括您可以“动画向下”到它或其他什么， FWIW。

【解决方案1】：

接受的答案中提出的解决方案有一个重要问题，即它只能使用 1 次。每次连续点击都会将#goToPage 附加到位置，并且窗口不会导航到锚点。

一种解决方案是在添加新锚之前移除锚部分：

function goToAnchor(anchor) {
  var loc = document.location.toString().split('#')[0];
  document.location = loc + '#' + anchor;
  return false;
}

使用示例：

<a href="#anchor" onclick="goToAnchor('anchor')">Anchor</a>

注意：锚点需要用引号括起来，没有哈希前缀。

【讨论】：

【解决方案2】：

看起来onClick应该是：

onclick="document.location+='#goToPage';return false;"

【讨论】：

【解决方案3】：

将其包装在锚标记中。你不需要使用 JS。

<a data-role="none" href="#page10"><img src="button.png" /></a>

【讨论】：

不能这样做，因为它是 jquery 移动设备，当我添加
根据stackoverflow.com/questions/8959519 可以在<a> 中添加data-role="none" 以防止它添加额外的类
刚刚对此投了反对票，但它似乎仍然是 6 年后最合适的答案。不知道为什么人们觉得有必要用 JS 把它复杂化。仅仅因为 OP 要求 JS 解决方案并不意味着其他人不正确。更重要的是，请参阅@foz 的评论，了解为什么不需要 JS 要求。
也不适用于某些框架，例如引导按钮，这些框架要求您将href=... 用于“其他”，但在许多情况下仍然是一个很好的答案:)

【解决方案4】：

尝试使用 / 斜线作为 root 或 /folder/，这样可以多次使用。

onclick="document.location='/#goToPage';return false;" 

onclick="document.location='/folder/#goToPage';return false;"

【讨论】：