更改window.location.href时，不会将页面滚动到底部

Question

I have issue while trying to scroll page to bottom in ajax success. I am setting window.location.href as I need to remove the hash tag in url and then I want to scroll the page to bottom. But the page is still on top after page load. Below is my code.

I know that scroll to bottom can be written after page reload outside ajax. But this particular requirement to scroll to bottom is not desired all the time and its based on a certain button click inside which ajax has been written.

    $.ajax({
            url: updatedUrl,
            dataType: 'json',
            type: 'post',
            data: 'id=' +  id,
            complete: function() {},
            success: function(data) {
                window.location.href = window.location.href.split('#')[0];
                $('.overlay').hide();
                var $target = $('html,body'); 
                $target.animate({scrollTop: $target.height()}, 1000); 
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
    });

What might be the issue here? How can I remove the hash tag as well as scroll page to bottom?

Answer 1

When you do window.location.href this will reload the page with new URL, the lines next to this line won't get exicuted. If you want to change the url without loading the page ,replace window.location.href = window.location.href.split('#'[0]; with window.history.pushState("string", "Title", window.location.href.split('#')[0]);

this will change the URLwithout reloading

Answer 2

I don't know if that's possible that way; when you load another page, is another scope, you can't control it from a previous page script.

But I have some suggestions.

If you can change the "new page", pass some information like in a query string in the URL and include a script in the new page to scrollDown.

Another option: open that page in an IFRAME 100%. This way you can control from "outside" (there are some restrictions about executing code from "outside" - is it the same "origin" (same domain).

I see you using window.location.href = window.location.href.split('#')[0]; . Perhaps you could, when you want to scroll to the bottom, use window.location.href = window.location.href.split('#')[0] + '#bottom'; and include a <div id="bottom"> at the end of the page.

I hope that helps.