Scroll not working on page redirection

Question

I'm trying to create an image uploading website with a comment system. The comments section is displayed below the image in the 'imagedisplay.php' file. Now, if the user has not logged in, then the user is redirected to the sign-up page and then after he signs-up, back to the page where the comments section is present.

What I wish to do is that after the user has signed in and is redirected back to the imagedisplay page, I want the page to scroll down to the comment-box.

Now to do this, I pass a url in a url, along with a hash that contains the id of the comment-box, in the following way:

var commentformid="commentform"+imageId;
window.location.href="signup.php?lastpage="+encodeURIComponent("imagedisplay.php?id="+imageId+"#"+commentformid);//redirect to signup page

Here, commentformid is the id of the comment-box and lastpage is the url of the page where someone tried to post a comment and where that user will be redirected to after signing up.

This is the code that I'm using to scroll down to the comment-box:

$(document).ready(function(){

//check for hash and if the hash exists, then scroll to the comment-box
var hash=window.location.hash;
if($(hash).length){
    $('body').animate({ scrollTop: $(hash).offset().top }, 1500);
}

})

The user is correctly directed to the signup page and then back to the imagedisplay page where the comments section is present but the problem is that the page doesnot scroll to the comment-box..rather, the when the page is loaded, it starts with the comment-box itself (that is, the page looks the way it should after scrolling, right when it loads). In short, there is no scroll effect.

[EDIT]: This is the reference I was using to achieve this

Hope my question is clear. I'm really new to this so any help is appreciated. Thanks in advance!

Answer 1

If you want to counter browser's native behavior of scrolling automatically, you can use this snippet:

$(window).on("beforeunload", function() {
    $(window).scrollTop(0);
});

Just so you know, it may not be bulletproof for all browsers.

Answer 2

By having the hash, the web browser immediately goes to the page location (before the document is ready).

What you should do is pass the hash separately, and then use jQuery to go to that location.

Try passing the URL

imagedisplay.php?id="+imageId+"hash="+commentformid;

Then with your jQuery:

var hash=GetQueryStringParams('hash');
if($(hash).length){
    $('body').animate({ scrollTop: $(window.location+hash).offset().top }, 1500);
}

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

The function is taken from this page