20

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;"
4
  • Did you see this answer? Maybe it helps stackoverflow.com/questions/8908191/… – devanand Aug 5 '12 at 9:24
  • Is there a reason to not just wrap the image in a hyperlink? – Tieson T. Aug 5 '12 at 9:25
  • Yes, the reason is I'm using JQuery Mobile which automatically adds classes to <a href 's in header. I need to avoid this. – Satch3000 Aug 5 '12 at 9:39
  • See also 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 8:12
17

it looks the onClick should be:

onclick="document.location+='#goToPage';return false;" 
1
  • 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 3 '15 at 14:56
32

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.

1
  • 1
    Coolest solution ever! – andresmafra Jan 11 '16 at 18:43
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>
4
  • Can't do it this way as it's jquery mobile and when I add the <a href ... it adds extra classes so I need to do this with the onclick on the img – Satch3000 Aug 5 '12 at 9:26
  • According to stackoverflow.com/questions/8959519 you can add data-role="none" to the <a> 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 8: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 8: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;" 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.