Prevent page scroll when hash is changed

Question

The following code is causing the page to scroll down to the bottom of the page. How do I prevent the page from scrolling in this situation?

// If note is clicked, then append id as hashtag at end of url
$("span.note").click(function(e){
    e.preventDefault();
    window.location.hash = $(this).attr('id');
});

see http://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document — phantasm, Apr 26 '12 at 13:40
Thanks. This link provided the insight I needed. What I needed to do was prepend some text to the hash value and then take that text off later when I used the hash value. — Stephen305, Apr 26 '12 at 13:55

score 0 · Answer 1 · answered Apr 26 '12 at 13:41

0

Additionally you could try to add: e.stopPropagation();

answered Apr 26 '12 at 13:41

Stefan Pöltl

362
3
9

score 0 · Answer 2 · answered Apr 30 '19 at 14:32

To disable scroll without removing hash in window.location

You can temporarily remove id of your node before changing location.hash Then you set id again on node

// Prevent default on anchor link click
$("a[href^='#']").click(function(e) {
    e.preventDefault();
    changeHashWithoutScrolling($(this).attr('href'));
});

// Prevent instant scroll of browser
function changeHashWithoutScrolling(hash){
    if($(hash).length > 0){
        var $el = $(hash);
        var elId = $el.attr('id');
        $el.removeAttr('id');

        window.location.hash = hash;

        $el.attr('id', elId);
    }
}

Prevent page scroll when hash is changed

2 Answers2