点击获取存储滚动位置

一个按钮，它可以在页面垂直中心的任何位置。点击这个按钮弹出一个弹出窗口，并且主体滚动到顶部。现在点击弹出式关闭按钮弹出窗口正在消失，但滚动应该从它开始的位置到相同的位置。点击获取存储滚动位置

很难解释，请参考查找图像和jsfiddle link

这里的js代码：

$('#popUp').click(function(e){ 
    $('body').animate({scrollTop:0}, 400); 
    $('.overlay').slideDown(300, function(){ 
     $('.openPopup').fadeIn(300); 
    }); 
    e.preventDefault(); 
}); 
$('.close').click(function(e){ 
    $('.openPopup').fadeOut(300, function(){ 
     $('.overlay').slideUp(300); 
    }); 
    e.preventDefault(); 
});

来源

2015-09-25 locateganesh

如果你希望用户是他们在那里他们点击它之前，为什么滚动到顶部？只需确保弹出窗口是在正确的位置，而不是 – Popnoodles

滚动到顶部，因为在我的网站弹出的时间比屏幕长，它应该适合80-90％的屏幕。这就是为什么我滚动身体顶部和弹出应从顶部开始。我不能给位置：固定;弹出。因为它需要滚动。 – locateganesh

Demo

.scrollTop()是你想要的。将其存储在打开状态，然后使用关闭的存储数据。

var scrolltop; 

$('#popUp').click(function(e){ 
    scrolltop = $(document).scrollTop(); // store it 
    $('body').animate({scrollTop:0}, 400); 
    $('.overlay').slideDown(300, function(){ 
     $('.openPopup').fadeIn(300); 
    }); 
    e.preventDefault(); 
}); 
$('.close').click(function(e){ 
    $('.openPopup').fadeOut(300, function(){ 
     $('.overlay').slideUp(300); 
    }); 
    //$(document).scrollTop(scrolltop); // use it 
    $('body').animate({scrollTop: scrolltop}, 400); // animate to scrolltop 
    e.preventDefault(); 
});

来源

2015-09-25 16:12:44 Popnoodles

谢谢，它的工作。但是，它可以再次滚动时向下滚动？我使用的是代码：var $ scroll = $（document）.scrollTop（$（'＃popUp'）。data（'scroll'））; $（'body'）。animate（{scrollTop：$ scroll}，400）; – locateganesh

你为什么要使用该代码？你定义的'$ scroll'是一个函数。也许这个更新会帮助你更清楚价值在哪里。 – Popnoodles

谢谢，忘记它。现在在您的演示中，它将使用动画向下滚动。我只是做了一些改变这里（http://jsfiddle.net/locateganesh/k9nL0s52/3/） – locateganesh

您可以试试这种方式。看到这里http://jsfiddle.net/k9nL0s52/4/

$(document).ready(function(){ 

var track_position; // this is for tracking your scrolled position 

    $('#popUp').click(function(e){ 
    $('body').animate({scrollTop:0}, 400); 
    $('.overlay').slideDown(300, function(){ 
     $('.openPopup').fadeIn(300); 
    }); 
    e.preventDefault(); 
    track_position = $('body').scrollTop(); //get current postion 
}); 
$('.close').click(function(e){ 
    $('.openPopup').fadeOut(300, function(){ 
     $('.overlay').slideUp(300); 
    }); 
    e.preventDefault(); 
    $('body').scrollTop(track_position); // set previous position after close click 
}); 

});

来源

2015-09-25 16:29:29

所以，几乎完全相同的答案，已经发布和接受17分钟前，除了'$（'身体'）.scrollTop（）'在IE中不起作用 – Popnoodles

再次发布此答案的要点是什么？ –

@Popnoodles其实我正忙于修改小提琴中的代码，并没有看到你回答爵士。 –

点击获取存储滚动位置

回答

相关问题