Javascript保持滚动位置

Question

我正在尝试使用以下代码刷新网页并保持其滚动位置：

function refreshPage() {
                var page_y = document.getElementsByTagName("body")[0].scrollTop;
                window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
            }
            window.onload = function() {
                setTimeout(refreshPage, 35000);
                if ( window.location.href.indexOf('page_y') != -1 ) {
                    var match = window.location.href.split('?')[1].split("&")[0].split("=");
                    document.getElementsByTagName("body")[0].scrollTop = match[1];
                }
            }

尽管这成功添加了？page_y = scrollposition，并且滚动位置正确，并且我可以成功将match和match [1]打印到控制台，但是唯一的问题是它不滚动页面。

编辑：

显然，该脚本是在脚本生成之前加载的，以生成网页的内容，但我不确定为什么。 在下面发布整个代码：

    <script>
        $(window).load(function(){ 
            $.getJSON("sun.json", function(json1) {
                $.each(json1, function(key, data) {
                    document.body.innerHTML += 
                                                                    "<div id='" + data.video + "' class='caption' data-source='" + data.video + "' data-title='" + data.title + "' data-desc='" + data.description + "' onclick='parent.changeVideo(dataset.source, dataset.title, dataset.desc); reloadImg()'>" +
                                                                        "<img class='thumbnail' src='" + data.thumb + "' alt='" + data.title + "'>" +
                                                                        "<div class='caption-text'>" +
                                                                            "<b class='caption-title'>" + data.title + "</b>" +
                                                                            data.description +
                                                                        "</div>" +
                                                                    "</div>" +
                                                                    "<hr>"
                    console.log("This should be first");
                    $(".caption").hover(function(){
                        $(this).find(".caption-text").fadeIn(400);
                    }, 
                    function(){
                        $(this).find(".caption-text").fadeOut(400);
                    });
                });
            });
        });

        var scroll = $(window).scrollTop();
        // yada
        $("html").scrollTop(scroll);

        function changeVid() {
            document.querySelector("#current-video_html5_api").src = data.video
            console.log(data.video);
        }
    </script>

    <script>
        function refreshPage() {
            var page_y = document.getElementsByTagName("body")[0].scrollTop;
            window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
        }
        var match = window.location.href.split('?')[1].split("&")[0].split("=");

       window.onload = function() {
            setTimeout(refreshPage, 35000);
            if ( window.location.href.indexOf('page_y') != -1 ) {

                //document.getElementsByTagName("body")[0].scrollTop = match[1];
                window.scrollTo(0, match[1]);
                console.log(match[1]);
                console.log("This should come second");
            }
        }
    </script>

Answer 1

您可以使用window.scrollTo：

function refreshPage() {
            var page_y = document.getElementsByTagName("body")[0].scrollTop;
            window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
        }
        window.onload = function() {
            setTimeout(refreshPage, 35000);
            if ( window.location.href.indexOf('page_y') != -1 ) {
                var match = window.location.href.split('?')[1].split("&")[0].split("=");
                window.scrollTo(0, match[1]);
            }
        }

Answer 2

您需要将scrollTo用作函数-而不是属性。 我相信scrollTop（作为函数）仅在库中可用（如jquery）。 这是一些有关如何使用window.scrollto（）的文档... https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo