带有可变偏移顶的div上的ScrollTo动画不正确工作

Question

当我点击正确的按钮导航菜单时，我很难找到正确的幻灯片。当单击菜单按钮时，它会显示一个链接列表。第一次单击其中一个链接将滚动到正确的幻灯片。如果您尝试单击另一个链接，它将中断。如果刷新页面并单击链接，它将带您到正确的幻灯片；如果再次单击该链接，它将动画到第一张幻灯片；现在，如果单击任何其他链接，它将滑到正确的幻灯片。

我不知道它为什么要这么做，就好像它需要再次进入第一张幻灯片才能找到正确的幻灯片。我将一个变量传递给从菜单项设置的幻灯片动画，并找到元素偏移量。当console.logging设置这些变量时，似乎没有正确设置变量，但是当移除动画时，变量似乎被正确设置。我完全搞不懂它为什么要这样做。请帮帮忙。http://projects.fireworkx.com/pc/index.html

    var appWindowWidth;
    var appWindowHeight;
    var htmlbody = $('#slidesContainer');
    var htmlbodyScroll;
    var iconPreloader = $('.iconPreloader');
    var globalButton = $('#globalMenu');
    var globalMenu = globalButton.next();
    var globalLinks = globalMenu.find('li');
    var homeLinks = $('#homeSlideNavigation').find('li');
    var subLinks = $('.slideContainer').find('.sectionNavigation');
    var iconLinks = $('.slideContainer').find('.iconNavigation');
    var currentSlide = 1;

    var slideElement;
    var slideElementOffset = 0;


    var totalVerticalSlides = $('#slidesContainer').children('.mainSlide').length;
    var slideContainerWidth;
    var slideCount;
    var platformOSTimeout;
    var currentTouchMove;
    var lastTouchMove;
    var swipeDirection;

clickToSlide = function(dataslide,scrollDirection) {
    if(scrollDirection === 'vertical') {
        slideElement = $('.mainSlide[data-slide="' + dataslide + '"]');
        slideElementOffset = slideElement.offset().top;

        console.log('currentSlide ' + dataslide);
        console.log('slideElementOffset ' + slideElementOffset);

        slideElement.addClass('animate');

        htmlbody.animate({
            scrollTop: slideElementOffset,
            scrollLeft: 0
        }, 500, function() {
            htmlbody.clearQueue().finish();
        });
    }
},



globalSlideNavigation = function() {
        globalButton.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            globalMenu.toggleClass('active');
        });

        globalLinks.on('click', function(e) {
            e.preventDefault();
            dataslide = $(this).attr('data-slide');
            clickToSlide(dataslide, 'vertical');
        });

        htmlbody.on('click', function(e) {
            if(globalMenu.hasClass('active')) {
                globalMenu.removeClass('active');
            }
        });
    },

Answer 1

之所以会这样跳来跳去，是因为.offset()获取元素相对于文档[https://api.jquery.com/offset/]的位置，所以当您使用scrollTop设置页面位置时，您将该元素的.offset()重置为0，因为它现在位于文档的顶部。如果使用.position()，同样适用于

正因为如此，当您再次单击导航时，您告诉页面将scrollTop设置为0，因此它将转到页面的顶部。如果单击另一个元素，它将从0获得它的位置，所以工作，或者如果您在页面的更低处，它将根据当前相对于滚动位置的位置被偏移，因此它可能是负数，也可能小于从0到0的位置。希望这是有意义的，我不确定我是否解释得很好。

要获取要转到的元素的值，需要获取当前滚动位置，然后将该位置添加到下一步要查看的部分，然后将其用作scrollTop()值。

下面是一个工作演示：http://jsfiddle.net/andyface/LrG59/，您可以在控制台中看到当前正在使用的偏移位置和基于当前scrollTop()值的位置的值。本质上，这是你唯一需要做的改变。

scrollPosition = htmlbody.scrollTop() + slideElementOffset = slideElement.offset().top;

htmlbody.scrollTop(scrollPosition);

希望这有帮助