CODEWITHSUNDEEP
jqueryscrolljquery-animatescrollbarscrolltop
Ganesh Yadav
Ganesh Yadav

Reputation: 2685

Get stored scroll position on click

A button, it can in anywhere in vertically centre of the page. on click on this button a popup opens and body scroll to top. Now On click of Popup close button popup is fading out But Scroll should come to same position from where it was started.

Hard to explain Please find reference image and jsfiddle link

scroll animate jquery

Here js code:

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

Upvotes: 0

Views: 3298

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

Demo

.scrollTop() is what you want. Store it on open, then use the stored data on close.

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

Upvotes: 1

A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38502

You can try this way. see here 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
});

});

Upvotes: 1

Related Questions