javascript - 关闭弹出窗口后将页面返回到原始 scrollTop 位置

Question

我有一个按钮，用于固定页面内容的位置，然后将其向左推，同时表单从右侧滑入。

除一件事外，这工作正常。当用户稍微向下滚动页面并单击按钮时，它成功地固定了位置。但是，当他们随后关闭此表单时，页面不会返回到原始位置……它将用户带回到页面顶部。我在下面发布了 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);
                });
            });
        });
    });

Answer 1

您正在使用 local 变量，因为您正在使用 var:

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

相反，删除 var 以便它可以在 .closeme 点击函数中访问。您已经在一开始就使用了 var。所以:

currentscrollpos = $(window).scrollTop();

这样一开始的变量就会被设置，两个函数都可以访问它。目前，您正在 a#testbutton 点击函数中声明另一个变量，保持原始变量不变。

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