Javascript保持滚动位置答案

【问题标题】：Javascript Maintain Scroll PositionJavascript保持滚动位置
【发布时间】：2015-07-07 03:42:14
【问题描述】：

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

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>

【问题讨论】：

我不确定您页面上内容/元素的确切长度，但可能是 javascript 在元素加载到您的页面之前触发，因此没有空间滚动到。我要么在准备好的文档上加载滚动脚本，要么在你的 html 末尾添加脚本。另外，尝试使用 window.scrollTo(x,y)
我尝试使用 jquery 准备好文档，并且该脚本也在我用来生成页面内容的脚本之后，所以它应该在之后加载。我试过window.scrollTo，但没用。

标签： javascript jquery

【解决方案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]);
            }
        }

【讨论】：

在本页控制台试一试：window.scrollTo(0, 100);它应该从顶部滚动到 100px。
好的，由于某种原因，它在我的内容生成之前加载，你能看看我上面对 OP 的编辑，如果你发现任何错误，请告诉我？
如果您需要在 getJSON 获取内容后触发 scrollTo 函数，则将 scrollTo 逻辑放入 .done() 方法中。 api.jquery.com/jquery.getjson Like $.getJSON("sun.json", function(json1) {...}).done(function(){window.scrollTo(0, 100)});
谢谢，乔丹，这行得通。现在，我也意识到了一些重要的事情：如果页面嵌入到 iframe 中，这将不起作用，关于如何调整我的代码以使其在 iframe 中工作的任何想法？
如果您尝试从其父级 iframe 调用方法，则它们必须位于同一域中，否则将无法正常工作。然后就可以使用 postMessage()，见这里：stackoverflow.com/questions/19406541/…

【解决方案2】：

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

【讨论】：

我在尝试window.scrollTo 时使用的确切代码是window.scrollTo(0, match[1]);，如上述答案所示。
match[1] 中的值是多少？