I was assigned to work on a web page which has a bunch of buttons on it. Each of those buttons needs to scroll down to a specific div and change the content of it. My problem is, that every time I click, it only ever anchors and never activates the onclick unless I remove the href. How can I make it use BOTH href AND onclick?

Example:

<a href="#divId" onclick="alert('Test');"><img src="images/image.png" /></a>

I was assigned to work on a web page which has a bunch of buttons on it. Each of those buttons needs to scroll down to a specific div and change the content of it. My problem is, that every time I click, it only ever anchors and never activates the onclick unless I remove the href. How can I make it use BOTH href AND onclick?

Example:

<a href="#divId" onclick="alert('Test');"><img src="images/image.png" /></a>

• javascript
• jquery
• html
• onclick
• href

• Could you please create a fiddle with the problem description? – Sarbbottam Commented Jul 22, 2014 at 16:53

5 Answers 5

If you return true from onclick it will do the href. If you return false from onclick it will not do the href:

<a href="#divId" onclick="alert('Do nothing'); return false;">Do Nothing</a>

<a href="#divId" onclick="alert('Do something'); return true;">Do Href</a>

One way would be to do the jump to location also in javascript. The advantage being that you could choose the sequence in which it happens. In this case, you could show the alert after moving to the new location if you wanted to.

You could write a function like this:

function jumpTo(strLocTag){
    window.location.hash = strLocTag;
}

And then modify the HTML like this:

<a href="#" onclick="jumpTo('divId');alert('Test');"><img src="images/image.png" /></a>

Try to make a function to call with onclick that have both, so when you click it will do what every you trying to achieve here and then redirect you to the url you are pointing at

window.location.replace("~/Page.aspx#divId");

Also you can use a function to keep your HTML clean

<a href="#divId" onclick="extra(); return false;"><img src="images/image.png" /></a>

in your javascript file

function extra(){
    alert("Test");
    window.location.replace("http://stackoverflow.");
}

If it was me I would just do everything in the onClick method and forget about the href part.

The onClick method can do what you wanted to do in the first place and then after that scroll down to the anchor tag. Here is a function that I wrote using jQuery to smoothly scroll somewhere on the page using an anchor tag. This is how I would use it:

function smoothScroll(anchorName, scrollSpeed) {

    // Do whatever you were going to have in the onClick event here

    // Start the scrolling to the anchor tag
    var gotoAnchor = "a[name='" + anchorName + "']";
    var scrollToPoint = $(gotoAnchor).offset().top;
    $('html, body').animate({ scrollTop: scrollToPoint }, scrollSpeed);
}

Then to use the function just take out the href of the link and put this function in the onClick event:

<a href="javascript:void(0)" onclick="smoothScroll('divId', 400);"><img src="images/image.png" /></a>