javascript - 具有可变偏移顶部的 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 开始的位置的数字。希望这是有道理的，但不确定我是否解释得很好。

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

这是为您准备的工作演示:http://jsfiddle.net/andyface/LrG59/您可以在控制台中看到您当前正在使用的偏移位置的值，然后是基于当前 scrollTop() 值的位置。从本质上讲，这是您应该进行的唯一更改。

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

htmlbody.scrollTop(scrollPosition);

希望对你有帮助