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

Question

一个按钮，可以在页面垂直居中的任意位置。单击此按钮会打开一个弹出窗口，主体会滚动到顶部。现在单击弹出窗口关闭按钮弹出窗口逐渐消失但是滚动应该从它开始的地方来到相同的位置。

不好解释请参考图片和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
});

});

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

Get stored scroll position on click

jquery

scroll

scrollbar

scrolltop

jquery-animate