0

I'm trying to make my webpage refresh and maintain it's scroll position with this code:

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];
                }
            }

While this successfully adds the ?page_y=scrollposition and the scroll position is accurate, and I can print match and match[1] to the console successfully, the only problem is it does not scroll the page.

EDIT:

Apparently, the script is loading before my script to generate the content of the web page and I'm not quite sure why. Posting entire code below:

    <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>
unironicallyironic
  • 73
  • 1
  • 9
  • i'm not sure of the exact length of contents/elements on your page, but it could be that the javascript is firing before the elements even load on your page, so there is no space to even scroll to. I would either load the scroll script on document ready or add the script at the end of your html. Also, try using window.scrollTo(x,y) – Liquidchrome Jul 06 '15 at 18:17
  • I tried on document ready with jquery, and the script is also after the script that I use to generate page content, so it *should* load after. I tried `window.scrollTo` but it did not work. – unironicallyironic Jul 06 '15 at 18:27

2 Answers2

1

You can use 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]);
            }
        }
alana314
  • 633
  • 8
  • 11
  • Try it in the console of this page: window.scrollTo(0, 100); It should scroll to 100px from the top. – alana314 Jul 06 '15 at 18:44
  • Alright, so for some reason it is loading before my content is generated, can you take a look at my above edit to the OP and tell me if you see anything wrong? – unironicallyironic Jul 06 '15 at 19:43
  • If you need your scrollTo function to fire after the getJSON gets the contents, then put the scrollTo logic in a .done() method. http://api.jquery.com/jquery.getjson/ Like $.getJSON("sun.json", function(json1) {...}).done(function(){window.scrollTo(0, 100)}); – alana314 Jul 06 '15 at 21:39
  • Thanks, Jordan, that worked. Now, I also realized something important: This won't work if the page is embedded in an iframe, any ideas on how to adapt my code to work while it's in an iframe? – unironicallyironic Jul 06 '15 at 22:11
  • If you're trying to call a method from an iframe on its parent, they need to be on the same domain or it won't work. Then you can use postMessage(), see here: http://stackoverflow.com/questions/19406541/how-to-call-parent-window-javascript-function-inside-iframe – alana314 Jul 07 '15 at 18:52
0

You need to use scrollTo as a function - not as a property. I believe scrollTop (as a function) is only available in libraries (like jquery). Here's some documentation on how to use window.scrollto()... https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

nril
  • 558
  • 2
  • 7