CODEWITHSUNDEEP
javascripthtml
ian
ian

Reputation: 12335

how to stop # links that call javascript functions from jumping to top of page

How do you I stop my links like this:

<a href="#" onClick="submitComment()">

From jumping to the top of the page after the click?

Upvotes: 18

Views: 21854

Answers (7)

Noah Gary
Noah Gary

Reputation: 960

Try using:

<a href="#a" onclick="myFunction()">Javascript is sweet!</a>

This will anchor the page in the place it is at. I had this same issue and this was a simple and good fix for me.

Upvotes: 1

Tobias Gaertner
Tobias Gaertner

Reputation: 1184

An other simple way is

<a href="javascript: void(0)" class="action-class">Link</a>

Then you could have a separate code with onClick event to the class "action-class" with whatever framework you like or plain JavaScript.

Upvotes: 0

gyrofly
gyrofly

Reputation: 39

Unless you need the anchor to actual go somewhere, you don't need to use an "href=" reference at all.

Try just using <a id="stay-put">Submit Comment</a>

Then your javascript would look like this:

$("#stay-put").click(function(){
    submitComment();
});

Upvotes: 1

Sampson
Sampson

Reputation: 268344

Many times you'll see people use the onclick attribute, and simply return false at the end of it. While this does work reliably, it's a bit ugly and may make your code-base difficult to manage.

<a href="#" onClick="submitComment(); return false;">

Seperate your HTML from your JavaScript

It's far better for you, and your project if you separate your markup from your scripting.

<a id="submit" href="enableScripts.html">Post Comment</a>

With the above HTML, we can find this element and wire up a handler for when the user clicks on the element. We can do all of this from an external .js file so that our HTML remains nice and clean, free from any scripting:

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
    document.attachEvent("onreadystatechange", setup);
} else {
    document.onload = setup;
}

function setup () {
    var submit, submitComment;
    submit = document.getElementById("submit");
    submitComment = function (e) {
        e = e || window.event;
        e.preventDefault();
        alert("You clicked the link!");
    };
    if (submit.addEventListener) {
        submit.addEventListener("click", submitComment, false);
    } else if (submit.attachEvent) {
        submit.attachEvent("onclick", submitComment);
    } else {
        submit["onclick"] = submitComment;
    }
}

There's a lot going on in the above code, but let's run over it from 30,000 feet. We start by figuring out how to best setup our code when the browser loads the page up. Ideally we'd like to do this when the DOM is ready.

After a few conditional checks we manage to instruct the browser to run our function after the DOM is prepared (this way our anchor element exists for us to interact with its behavior).

Our setup function gets a reference to this anchor, creates a function that we'll run when the anchor is clicked, and then finds a way to attach that function call to the click event of the anchor - losing your mind yet? This is the madness JavaScript developers have had to deal with for some time now.

With jQuery, this is much easier

Perhaps you've heard of jQuery, and wondered why it is so popular. Let's solve the same problem, but this time with jQuery rather than raw vanilla JavaScript. Assuming the following markup:

<a id="submit" href="enableScripts.html">Post Comment</a>

The only JavaScript we need (thanks to jQuery) is this:

$(function(){
    $("#submit").on("click", function(event){
        event.preventDefault();
        submitComment();
    });
});

That's it - that is all it takes. jQuery handles all of the tests to determine, given your browser, what the best way is to do this or that. It takes all of the complicated stuff and moves it out of the way so that you are free to be creative.

Upvotes: 28

Kamal Pundir
Kamal Pundir

Reputation: 277

Just return false onClick of Hyperlink

Its will not scroll page up ie it will be still where it is

Upvotes: 1

Chris Brandsma
Chris Brandsma

Reputation: 11736

Add a return false. I believe that without that the page will reload.

<a href="#" onClick="submitComment(); return false;">

Upvotes: 7

Dan Diplo
Dan Diplo

Reputation: 25339

You could use this alternative syntax instead:

<a href="javascript:submitComment()">

Upvotes: -6

Related Questions