關閉彈出窗口后將頁面返回到原始 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

您使用的是局部變量，因為您使用的是var ：

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

相反，刪除var以便它可以在.closeme單擊函數中訪問。 您一開始就已經使用了var 。 所以：

currentscrollpos = $(window).scrollTop();

這樣，最開始的變量將被設置，這兩個函數都可以訪問。 當前，您在a#testbutton單擊函數中聲明了另一個變量，而保持原始變量不變。

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

Answer 2

您可以使用此代碼返回到從瀏覽器關閉的頁面的位置

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> var currentposition; $(document).ready(function(){ $(window).scroll(function(){ var scrollPos = $(document).scrollTop(); console.log("scrollPos:"+scrollPos); localStorage.setItem("key",scrollPos); }); currentposition=localStorage.getItem("key"); window.scrollTo(0,currentposition); alert("currentposition:"+currentposition); }); </script>