javascript - 在slideToggle上保持滚动位置？

Question

我有一个可以将多个 div 滑入或滑出的按钮。单击按钮时，我希望按钮在单击时保持在窗口中的相同位置，但是由于滑动 div 改变了按钮上方的高度，它最终会移动（请参阅小提琴以了解其外观：http：/ /jsfiddle.net/fJWeQ/3/ )

我看过动画scrollTop，但不知道如何以一种不会让人兴奋的方式使用它。有没有办法在动画发生时将滚动窗口锚定到元素上？

谢谢！

Answer 1

如果您动态更改 div，则滚动也会调整。您的意图是按照您的说明保持按钮固定，因此我已更新您的小提琴以使其正常工作。

基本上在positon:fixed单击时制作按钮。您当然可以选择将按钮固定在您的 CSS 中，而不是等待点击。

Answer 2

我可以使用步进回调函数来解决这个问题，最多 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

Answer 3

这有点紧张，但这里有一个你可以建立的解决方案

http://jsfiddle.net/fJWeQ/5/

当它在运动中时，我会轮询当前的滚动位置并确保按钮仍然在同一个位置。

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