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!

Could you please try putting `alert($(hash).length)` just before `if` condition? Might be your page content is getting loaded via ajax and hence the required elements are not present in DOM at the time of doc ready. — vijayP, Jan 07 '17 at 13:23
@vijayP the anchor works as stated in question and browser is already scrolling to it by default process — charlietfl, Jan 07 '17 at 13:27
just try with `$('html,body').animate` instead of your code. Lets see. — vijayP, Jan 07 '17 at 13:47

score 0 · Answer 1 · answered Jan 07 '17 at 13:42

0

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.

answered Jan 07 '17 at 13:42

Serg Chernata

12,280
6
32
50

Ohkay I tried it but it's not working...still behaves in the same way – meagler Jan 07 '17 at 13:49

Sablefoste · Answer 2 · 2017-01-07T14:13:36.417

0

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

edited Jan 07 '17 at 14:13

answered Jan 07 '17 at 13:51

Sablefoste

4,032
3
37
58

Thanks a lot! So i should write this code within $(document).ready(function(){...} right? – meagler Jan 07 '17 at 13:58
Yes, but the function part should be outside the `$(document).ready()` function. – Sablefoste Jan 07 '17 at 13:59
ohkay ..I'm getting an illegal character error in my console at the closing bracket of the function – meagler Jan 07 '17 at 14:02
I modified `window.location.hash` to `window.location+hash`. – Sablefoste Jan 07 '17 at 14:07
The function `GetQueryStringParams()` looks for a query string by the name that you pass it. Because `hash` is in the URL, I want it to look for that string name. – Sablefoste Jan 07 '17 at 14:14
Ohkay so i tried what you said but the console still shows the error..Could you also check the edit to the question that I made just now? Maybe that'll help in debugging..Thanks a lot for your time! – meagler Jan 07 '17 at 14:22

Scroll not working on page redirection

2 Answers2