21

I have a button as an image...

<img src="button.png" />

I need some javascript in an onclick where when click it will navigate to a local anchor. For example:

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

How can I do this?

Update: This is the code I'm using:

onclick="document.location=#goToPage';return false;"
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Satch3000
  • 47,356
  • 86
  • 216
  • 346
  • Did you see this answer? Maybe it helps http://stackoverflow.com/questions/8908191/use-jquery-click-to-handle-anchor-onclick – devanand Aug 05 '12 at 09:24
  • Is there a reason to not just wrap the image in a hyperlink? – Tieson T. Aug 05 '12 at 09:25
  • Yes, the reason is I'm using JQuery Mobile which automatically adds classes to – Satch3000 Aug 05 '12 at 09:39
  • See also https://stackoverflow.com/q/41624778/32453 if you're using jQuery (or wanted to do it the truly manual way by setting top location), also includes that you can "animate down" to it or what not, FWIW. – rogerdpack Oct 23 '17 at 08:12

4 Answers4

34

The solution presented in the accepted answer has the important issue that it can only be used 1 time. Each consecutive click appends #goToPage to location and the window won't navigate to the anchor.

A solution is to remove the anchor part before appending a new anchor:

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

Usage example:

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

NOTE: The anchor needs to be enclosed in quotes, without the hash prefix.

Tivie
  • 18,864
  • 5
  • 58
  • 77
  • 2
    Coolest solution ever! – andresmafra Jan 11 '16 at 18:43
  • What does `return false;` do in this case? – Nelu Sep 13 '22 at 17:54
  • 1
    @Nelu prevents the default browser behavior from taking place. In this case, it's important because some browsers will refresh the page when clicking on a hyperlink. The modern way of doing this is event.preventDefault() – Tivie Oct 08 '22 at 03:03
17

it looks the onClick should be:

onclick="document.location+='#goToPage';return false;"
Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
bingjie2680
  • 7,643
  • 8
  • 45
  • 72
  • 5
    See Tivie's answer below. It points out that this answer can only be used once. After that, it just appends an additional #tag at the end of the URL and doesn't do anything. – Dave Aug 03 '15 at 14:56
5

Wrap it in an anchor tag. You don't need to use JS.

<a data-role="none" href="#page10"><img src="button.png" /></a>
Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
  • Can't do it this way as it's jquery mobile and when I add the – Satch3000 Aug 05 '12 at 09:26
  • According to http://stackoverflow.com/questions/8959519/ you can add `data-role="none"` to the `` to prevent it adding extra classes – foz Aug 24 '15 at 14:46
  • 3
    Just got a downvote on this however it still seems to be the most appropriate answer after 6 years. Not sure why people feel the need to overcomplicate this with JS. Just because OP asked for JS solution doesn't mean others are incorrect. More to the point, see @foz's comment for why the JS requirement is not necessary. – Paul Fleming Dec 12 '16 at 08:47
  • Also doesn't work with some frameworks like bootstrap buttons which require you to use `href=...` for "something else" but still a good answer in many cases :) – rogerdpack Oct 23 '17 at 08:11
1

Try using with / slash for root or /folder/, so it can be used many times. 

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

onclick="document.location='/folder/#goToPage';return false;"
Ricardo Frasson
  • 53
  • 6