具有可变偏移顶部的 div 上的 ScrollTo 动画无法正常工作

【问题标题】：ScrollTo animation on div with variable offset top not working correctly具有可变偏移顶部的 div 上的 ScrollTo 动画无法正常工作
【发布时间】：2014-05-05 12:10:08
【问题描述】：

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

我不确定它为什么这样做，它几乎就像它需要再次转到第一张幻灯片才能找到正确的幻灯片一样。我将一个变量传递给从菜单项设置的幻灯片动画并找到元素偏移量。当 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');
            }
        });
    },

【问题讨论】：

• 看来如果我改变 var htmlbody = $('#slidesContainer');到 var htmlbody = $('html, body');并更改 var totalVerticalSlides = $('#slidesContainer').children('.mainSlide').length;到 var totalVerticalSlides = $('#body').children('.mainSlide').length;并在 index.html 中删除

  div 包装它的幻灯片。但动画不适用于 iPad 上的 html 和 body。我需要滚动来处理 div 元素。
• 顺便说一下，我会小心地将客户工作发布到 stackoverflow，可能一切都很好，但你永远不知道，有些客户可能过度保护，不想让任何人知道他们是为他们完成工作。如果你可以在 jsfiddle 或类似的地方，最好快速模拟你的问题并发布。