Stop scrolling top by the click function of anchor tag

Question

I have an anchor tag which when clicked seems to scroll to the top of the screen.

I am using onclick and sending a model property to the function.

How can i prevent scrolling to top.

I have tried entering the href as javascript:void(0); and tried returning false.

<a href="javascript:void(0);" onclick="GetUsers('@(user.Code)');"><img ... /></a>

function GetUsers(Code) {
    $.ajax({
        ...
    });                                             
}

Update

Tried debugging it and it doesn't get to this line.

 var user = $(this).data('user-code');

Also no errors on page.

$.ajax({
            type: "GET",
            url: "/Admin/GetUsers/",
            data: { "User": user},
            success: function (data, textStatus) { ...

Doesn't get to this point...

Update

Now getting all the information, although the scrolling is still an issue. The prevent default doesn't seem to make any difference.

@RoryMcCrossan Oh, I'm not familliar with that... was going to point out you need to pass it somehow in your answer, but you already did that. — parchment, Jul 17 '14 at 15:08
Tried debugging it and it doesn't get to this line. var user = $(this).data('user-code'); Also no errors on page. — PhilGibson, Jul 17 '14 at 15:21
Did you try omitting the `href` attribute? In HTML5 this is valid (IIRC). — 11684, Jul 18 '14 at 06:56

score 2 · Answer 1 · answered Jul 17 '14 at 15:06

To do this you need to stop the default action of the button. Firstly, use jQuery to attach your events instead of the outdated on attributes:

<a href="#" class="myLink" data-user-code="@(user.Code)"><img /></a>

Then in your jQuery event handler, you can use preventDefault on the passed event:

$('.myLink').click(function(e) {
    e.preventDefault();
    var user = $(this).data('user-code');
    $.ajax({
        // ajax settings...
    }); 
});

I used a data attribute on the element to hold the parameter which I'm guessing is required in your AJAX call.

score 1 · Answer 2 · answered Jul 17 '14 at 15:15

A way to stop the scrolling without adding to javascript would be to set the href to an anchor with an ID that is not on the page, for example -

<a href="#!" onclick="GetUsers('@(user.Code)');"><img ... /></a>

Would work as it is unlikely that you will have an element with the name '!' on your page.

Stop scrolling top by the click function of anchor tag

2 Answers2