Вернуть страницу в исходное положение scrollTop после закрытия всплывающего окна - PullRequest
Новая
       14

Вернуть страницу в исходное положение scrollTop после закрытия всплывающего окна

1 голос
/ 20 сентября 2011

У меня есть кнопка, которая фиксирует положение содержимого страницы, а затем толкает ее влево, в то время как форма скользит справа.

Это работает нормально, за исключением одной вещи. Когда пользователь слегка прокручивает страницу вниз и нажимает на кнопку, он успешно фиксирует позицию. Однако когда они затем закрывают эту форму, страница не возвращается в исходное положение ... она возвращает пользователя в начало страницы. Я разместил ниже jquery, который может помочь лучше объяснить проблему.

Здесь также есть пример jsfiddle ...

http://jsfiddle.net/CMbBC/

    var pageContents;
    var currentscrollpos;
    $(document).ready(function() {
        $("a#testbutton").live('click', function() {
            var currentscrollpos = $(window).scrollTop();
            var pageContents = $("body").html();
            $("body").html("");
            $("<div class='pageContainer'>" + pageContents + "</div>").prependTo("body");
            $(".pageContainer").css({'position':'fixed','top':currentscrollpos*-1});
            $("html, body").animate({ scrollTop: 0 }, 0);
            $("<div class='blackout'></div>").appendTo("body");
            $(".blackout").css("opacity",0.8).fadeIn('slow', function() {
                $("<div class='popupPanel'><a class='closeme'>close</a></div>").appendTo("body");
                $(".popupPanel").animate({
                    right: "0px"
                }, 500, function() {
                    $(".popupPanel").css("position","absolute")
                });
                $(".pageContainer").animate({
                    left: "-200px"
                }, 500, function() {
                });
                $("a#testbutton").append(currentscrollpos)
            });
            return false;
        });

        $('.closeme').live('click', function() {
            var pageContents = $(".pageContainer").html();
            $(".popupPanel").css("position","fixed").animate({
                right: "-200px"
            }, 500, function() {

            });
            $(".pageContainer").animate({
                left: "0px"
            }, 500, function() {
                $(".blackout").fadeOut('slow', function() {
                    $(".blackout").remove();
                    $("body").html(pageContents);   
                    $("html, body").animate({ scrollTop: currentscrollpos }, 0);
                });
            });
        });
    });

1 Ответ

2 голосов
/ 20 сентября 2011

Вы используете локальную переменную, потому что вы используете var: 

var currentscrollpos = $(window).scrollTop();

Вместо этого перетащите var, чтобы он был доступен внутри функции .closeme click,Вы уже использовали var в самом начале.Итак: 

currentscrollpos = $(window).scrollTop();

Таким образом, будет установлена ​​переменная в самом начале, к которой могут обращаться обе функции.В настоящее время вы объявляете другую переменную внутри функции a#testbutton click, оставляя исходную переменную нетронутой.

http://jsfiddle.net/pimvdb/CMbBC/2/.

...