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

Question

I have a button which fixes the position of the page content then pushes it left while a form slides in from the right.

This is working fine except for one thing. When the user has scrolled down the page slightly and clicks on the button it successfully fixes the position. However when they then close this form, the page does not return to the original position... it takes the user back to the top of the page. I've posted the jquery below which might help to explain the problem better.

There's also a jsfiddle example here...

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

You are using a local variable because you are using var :

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

Instead, drop the var so that it's accessible inside the .closeme click function. You already used var at the very beginning. So:

currentscrollpos = $(window).scrollTop();

That way, the variable at the very beginning will be set, which can be accessed by both functions. Currently, you are declaring another variable inside the a#testbutton click function, leaving the original variable untouched.

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

Answer 2

You can use this code to return to the position of the page that is closed from the browser

 <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>