Need to disable anchor scroll in AJAX code

Question

https://jsfiddle.net/JTBennett/ekc6yobw/

Here's my current jQuery code:

var rel = "";
var menuUp = true;

$('.navButton').click(function () {
    rel = $(this).attr('rel');
    menuUp = false;
    window.location.hash = rel;
    $('#mainContainer').scrollTop(0);
});

$('.resetButton').click(function () {
    window.location.hash = "";
    menuUp = true;
});

function navigate() {
    $('#mainMenu').animate({
        opacity: 0,
        left: '100%'
    }, function () {
        $(rel).animate({
            top: '0px'
        });
    });
};

function resetNav() {
    $(rel).animate({
        top: '110%'
    }, function () {
        $('#mainMenu').animate({
                    opacity: 1,
            left: '0px'
        });
    });
};

window.onhashchange = function () {
    if (menuUp) {
        resetNav();
    } else {
        navigate();
    }
};

I'm attempting to disable the scrolling up to the top of the page on click. I've never done any manipulation of hashes until now...figured I'd better jump on the AJAX bandwagon.

Anyway, I've tried quite a few methods without success (links below).

The most hopeful candidate was this piece of code:

var elems = document.getElementsByClassName('mainContainer');

for (var i=0; i<elems.length; ++i) {
  //add click function to each element
  elems[i].addEventListener('click', clickFunc);
}

var keepScroll = false;

function clickFunc(e) {
  e.preventDefault();
  history.replaceState({}, '', e.target.href);
}

I placed it as a separate header script, got no relief. I'm sure the issue is related to the AJAX code relying on the hashes for commands, but I don't know why I can't disable the default action still. If anyone can fork my jsfiddle and find what's wrong, I'd greatly appreciate it.

-Joel

  [1]: http://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page
  [2]: http://stackoverflow.com/questions/10626814/avoid-the-page-scrolling-jumping-when-anchor-is-in-the-url
  [3]: http://jsbin.com/IKoRiTeS/2/edit?html,css,js,output

Need to disable anchor scroll in AJAX code

0 Answers0