Prevent page scroll after click?

Question

After clicking on the link, Click Me, the page scrolls back to the top. I do not want this. How can fix it?

Scroll-bar:

enter image description here

    function myalert() {
        var result = true;
        //var hide = $('.alert').fadeOut(100);
        //var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Are you sure you want to delete this item?<div class="clear"></div><button class="ok">no</button><button class="cancel">yes</button></div>');
        var link = this;
        $('body').append($alertDiv);
        $('.ok').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(true, link);
        });
        $('.cancel').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(false, link);
        });
        $alertDiv.fadeIn(100);
        $('#appriseOverlay').css('display', 'block');
        return result;
    };
$('.click').click(myalert);
    function callback(result, link) {
        //
        if(result){
        }
    }

Gilberto Sánchez · Accepted Answer · 2016-01-27 20:25:15Z

24

You only need to change the "#" to "javascript:void(0)" on HTML code:

<a href="javascript:void(0)" class="click">Click Me</a>

Another solution is add a "/" after the "#":

<a href="#/" class="click">Click Me</a>

answered Jan 27, 2016 at 20:25

Gilberto Sánchez

6274 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luis Alvarado Over a year ago

OMG I love you. That / thing ROCKS!. I just told 5 other developers and Gilberto, you now have 3 development companies kissing your feet right now ^^

Pankaj Gupta Over a year ago

or you can simply remove href attribute from there. both will work

WLFree Over a year ago

2021 and it works perfectly - href="#/" - thank you!

tvanfosson · Accepted Answer · 2011-10-08 15:57:49Z

9

The reason that it is going to the top of the page is because your anchor tag has a hash symbol as the href. The hash syntax allows you to refer to a named anchor in the document, with the link taking you to that place in the document. The default action for an anchor tag when you click on it and the href refers to a named anchor that doesn't exist is to go to the top of the page. To prevent this cancel the default action by returning false from the handler or using preventDefault on the event.

function myalert(e) {
    e.preventDefault(); // <-- prevent the default action

    ...

    return false; // <-- alternative way to prevent the default action.
};

edited Oct 8, 2011 at 15:57

answered Oct 8, 2011 at 15:50

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

4 Comments

Sparky Over a year ago

Should not use return false; unless you intend to stop event bubbling. See answer by @rodneyrehm instead.

tvanfosson Over a year ago

@Sparky672 - absolutely correct, but in nearly all cases of this type of of behavior I've observed preventing event bubbling is also correct.

Yadhu Babu Over a year ago

what is this e here

tvanfosson Over a year ago

e is the event object

rodneyrehm · Accepted Answer · 2011-10-08 15:54:24Z

5

simply prevent the default function (jump to #marker) from executing: http://jsfiddle.net/Y6Y3Z/1/

answered Oct 8, 2011 at 15:54

rodneyrehm

13.6k1 gold badge43 silver badges57 bronze badges

Collectives™ on Stack Overflow

Prevent page scroll after click?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related