Javascript 在滑动切换时保持滚动位置?

Javascript 在滑动切换时保持滚动位置?,javascript,jquery,animation,slidetoggle,Javascript,Jquery,Animation,Slidetoggle,我有一个按钮,可以将多个div滑入或滑出。单击按钮时,我希望按钮在单击时保持在窗口中的相同位置,但由于滑动div改变了按钮上方的高度,因此它最终会移动(请参见fiddle以了解其外观:) 我已经看过动画scrollTop,但没有看到如何以一种不会让人紧张的方式使用它。在动画发生时,是否有方法将滚动窗口锚定到元素 谢谢 如果动态更改div,滚动条也会调整。你的目的是按照你所说的保持按钮固定,所以我已经更新了你的工作方式 基本上使按钮处于位置:单击时固定。当然,您可以选择在css中固定按钮,而不必等

我有一个按钮,可以将多个div滑入或滑出。单击按钮时,我希望按钮在单击时保持在窗口中的相同位置,但由于滑动div改变了按钮上方的高度,因此它最终会移动(请参见fiddle以了解其外观:)

我已经看过动画
scrollTop
,但没有看到如何以一种不会让人紧张的方式使用它。在动画发生时,是否有方法将滚动窗口锚定到元素


谢谢

如果动态更改div,滚动条也会调整。你的目的是按照你所说的保持按钮固定,所以我已经更新了你的工作方式


基本上使按钮处于
位置:单击时固定。当然,您可以选择在css中固定按钮,而不必等待单击。

这有点紧张,但这里有一个解决方案,您可以在此基础上构建

当它运动时,我轮询当前滚动位置,并确保按钮仍在同一位置

var togglesInMotion = 0;
var buttonOffset;
var intervalHandler;
$(document).ready( function() { 
    $("#toggleButton").click(function(){        
        buttonOffset = $(this).offset().top - $(window).scrollTop();        
        intervalHandler = setInterval(function(){            

            var curOffset = $('#toggleButton').offset().top - $(window).scrollTop();        
            var adjustment = curOffset - buttonOffset;

            var currentScrollPosition = $(window).scrollTop();
            $(window).scrollTop(currentScrollPosition + adjustment);
            //$(window).scrollTop(0);
        });        
        togglesInMotion++;
        $('#div1').slideToggle("slow", stopScrolling);  
        togglesInMotion++;
        $('#div3').slideToggle("slow", stopScrolling);                  
    });    
});
function stopScrolling(){    
    togglesInMotion--;
    if(togglesInMotion == 0){
        clearTimeout(intervalHandler);        
    }
}

我能够使用一个步骤回调函数来修复这个问题,最多是1px的抖动。一点信息,以防有人无意中发现:

有关如何使用步骤回调函数的一些详细信息如下所示。在动画的每次迭代中都会运行一个步骤回调函数

在动画之前:

holdSpot = this; //can set to whatever element you want to hold it at
topOfElement = $(holdSpot).offset().top;
topOfScroll = $(window).scrollTop();
effectiveHeight = topOfElement - topOfScroll;
topOfElement = $(holdSpot).offset().top; //finds new position of element
$(window).scrollTop(topOfElement - effectiveHeight); //sets scrollTop to position of element minus the original height difference
步长函数(在动画的每次迭代中运行):


您的小提琴似乎缺少JavaScript。请更新并在问题中包含您的代码。在我们能看到我们正在使用的东西之前,我们无法提供真正的帮助它在button onclick事件中,因为它非常短,而且有些东西对我来说不正常。我可能遗漏了一些东西,但我没有看到任何代码。