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

希望有所帮助

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

1 个答案: