JavaScript内联onclick跳转到本地锚点

Question

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

<img src="button.png" />

我需要在onclick事件中写一些javascript代码，当点击时它会导航到本地锚点。例如：

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

我该如何做到这一点？

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

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

- Satch3000

---

你看到这个答案了吗？或许它会有所帮助。https://dev59.com/Amox5IYBdhLWcg3w44Tb - devanand

有没有理由不直接将图像包装在超链接中？ - Tieson T.

是的，原因是我正在使用JQuery Mobile，它会自动向标题中的<a href>添加类。我需要避免这种情况。 - Satch3000

如果您正在使用jQuery（或者想要通过设置顶部位置来手动完成），请参见https://dev59.com/xp7ha4cB1Zd3GeqPfCi0，还包括您可以“向下动画”到它或其他内容，供参考。 - rogerdpack

Answer 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>

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

- Tivie

---

最酷的解决方案！ - andresmafra

在这种情况下，return false; 是什么作用？ - Nelu

@Nelu 防止默认浏览器行为发生。在这种情况下，这很重要，因为某些浏览器在单击超链接时会刷新页面。现代的做法是使用 event.preventDefault()。 - Tivie

Answer 2

看起来应该是这样的onClick：

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

- bingjie2680

---

请参见下面Tivie的回答。它指出这个答案只能使用一次，之后它只会在URL末尾添加一个额外的#标签，不会有其他动作。 - Dave

Answer 3

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

请注意，保留了HTML标签。

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

- Paul Fleming

---

无法这样做，因为它是jQuery Mobile，当我添加<a href...时，它会添加额外的类，所以我需要在img上使用onclick来完成此操作。 - Satch3000

根据https://dev59.com/11_Va4cB1Zd3GeqPUYxM，您可以将`data-role="none"`添加到`<a>`以防止它添加额外的类。 - foz

刚刚收到了一条负评，但在6年后这似乎仍然是最合适的答案。不确定为什么有人觉得需要使用JS来使问题变得更加复杂。仅仅因为提问者要求JS解决方案，并不意味着其他解决方案就是错误的。更重要的是，请看 @foz 的评论，了解为什么不必要满足JS的要求。 - Paul Fleming

还有一些框架不支持此方法，如需要使用href=...的bootstrap按钮等，但在许多情况下仍是一个好答案 :) - rogerdpack

Answer 4

尝试使用带有斜杠的根目录或/folder/，这样它可以被多次使用。

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

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

- Ricardo Frasson