单击时获取存储的滚动位置

Question

一个按钮，它可以位于页面垂直中心的任何位置。点击此按钮，弹出窗口打开，正文滚动到顶部。 现在点击Popup关闭按钮弹出窗口渐渐消失但是Scroll应该从它开始的位置开始。

难以解释请找参考图片和 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();
});

Answer 1

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

Answer 2

您可以尝试这种方式。见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
});

});