Question

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

这是我当前的jQuery代码：

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();
    }
};

我试图在点击时禁用向上滚动到页面顶部。到目前为止，我从来没有对哈希进行过任何操作......我觉得我最好跳上AJAX的潮流。

无论如何，我已经尝试了很多方法而没有成功（链接如下）。

最有希望的候选人是这段代码：

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);
}

我将它作为单独的标题脚本放置，没有得到解脱。我确定这个问题与依赖于命令哈希的AJAX代码有关，但我不知道为什么我仍然无法禁用默认操作。如果有人能分叉我的jsfiddle并发现什么是错的，我会非常感激。

-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

需要在AJAX代码中禁用锚点滚动

0 个答案: