CODEWITHSUNDEEP
javascriptjqueryanchorjquery-events
Viren
Viren

Reputation: 5962

Why does clicking a link go to the top of the page?

This may sound a weird question, I have a page which has a link:

<a href="#" class="emails" > Email to Friends </a>

Now I have an event attach to the anchor tag so that on click the given div toggle it state.

The Javascript Code look like this:

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle
   })
})

Now the above code and all of it works fine, but here the big deal, when I click the given link the my focus of the page move to top of the page, and I have to scroll all the way down to see the change.

Can anyone help me on this?

Upvotes: 1

Views: 4728

Answers (4)

Soviut
Soviut

Reputation: 91535

It does this because the href="#" is an empty anchor. Anchors are used for linking to specific spots within a page. An empty anchor results in the page going back to the top.

To fix this in your javascript, you need to prevent the click event from propagating or "bubbling" up the DOM. You can do this by returning false from your click event.

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle();
       return false; // prevent propagation
   })
});

You can also make the event available in the bind's click handler function by using an argument, usually named e. Having access to the event allows you to call methods on it such as .preventDefault().

$(document).ready(function() {
    $(".emails").bind("click", function(event) {
       $("div#container").toggle();
       event.preventDefault(); // this can also go at the start of the method if you prefer
   })
});

Upvotes: 7

user2685667
user2685667

Reputation: 11

This will solve all cases where anchor is empty.

$(document).ready(function () {
    $('a').click(function () {
        $('[href = #]');
        return false;

    });
});

Upvotes: 1

Manishearth
Manishearth

Reputation: 16188

Use:

<a href="javascript:void(0)" class="emails" > Email to Friends </a>

Or, using jQuery,

$(document).ready(function() {
    $(".emails").attr("href","javascript:void(0)");
})

Void(0) returns a.. well.. it doesn't return anything. The browser knows how to go to nothing (i.e., what would happen if you did href=""), and to # (# is the top of the page), but not how to go to a void "value".

Whenever you put a javascript: in an attribute, the attribute's value gets set to the return value of the code inside. The code is called the first time the attribute is accessed.

But, void(0) returns nothing. Not even "". The browser takes this to meant that the link is not a link at all.

Upvotes: 0

Abhranil Das
Abhranil Das

Reputation: 5918

This comes from the href='#' in the a. Just remove this tag. But then it's technically not a link any more, so the cursor will default to a text-selector when over it. You can override this using cursor:pointer in your CSS. See the left menu on this website for reference.

Upvotes: 0

Related Questions