0%

Hey! Do you have any query related to front end?

Sign in Sign up

Force other page to scrollBack

Example shows how content scroll at a specific location, which related link has been clicked in previous page.

Need to include on link page:

One has to define the id of the content page in the query string of navigation. This defines the position on the particular content on other page.

Below it has been explained, how to add add query string:

  • Homepage
  • About
  • Services
  • Gallery
  • Contact us
  • The "?" mark indicates about the addition of query string. "pageid" is a key and "home" is the value, which is the "id" of content of another page. Similarly for rest of the links, query string has been defined.

    Needed on content page:

    You will have to define "id" for respective content section, which was used for the link or vise-versa.

    Logic behind this:

    It is quiet simple. Get the value of query string and match with the content id, and finally, get the top position of the particular content and animate the page accordingly.

    Every commented lines explains about written code.

    $(function(){
       //animate page to 0,0 on page reload by jquery.
       $("body,html").stop().animate({scrollTop:0},2000,'easeOutExpo');
    
       //Get the query string data
       var queryData = window.location.search;
    
       //Check wheather queryData is empty
        if(queryData){
                
            //Replace and split the query string to get value and store it in variable
            var queryArray = queryData.replace("?","").split("=");
    
            //Strore the query value in a variable from queryArray.
            var queryVal = queryArray[1];
    
            //check for each container wather the query id is present or not
            //if yes then get the offset() value
            for(var i=0; i<$('section').length; i++){
    
                //Get id of each and every section
                var sectionId = $('section').eq(i).attr('id');
    
                //Equate query value and content id value
                if(queryVal == sectionId){                
                        
                    //Now get the offset() if container having id equal to query string value
                    var containerTopVal = $("#"+queryVal).offset().top;
    
                    //Now scroll window to that location
                    $("body,html").stop().animate({scrollTop:containerTopVal},2000,'easeOutExpo');
    
                    //Stop looping if matches the value from extra looping
                    break;
                }   
            }
        }
    });
    

    How to comment:

    • Create an account in discuss by clicking on login next to arrow.
    • Create password for discuss and varify your email id, through your mail.
    • Refresh page and comment.

    You might also like

    • Image selection like checkbox

      Select your image like a checkbox with little jQuery

      • 413
      • 43
      • 413
      • facebook icon
      • twitter icon
      • google plus
    • Show thumbnail on browse

      Way to show thumbnail of browsed image.

      • 270
      • 6
      • 270
      • facebook icon
      • twitter icon
      • google plus
    • Pure css3 accordion

      A pure css3 accordion which has been created by target pseudo selector.

      • 376
      • 18
      • 376
      • facebook icon
      • twitter icon
      • google plus

    Latest quries posted

    gopa kumarabout 3 years ago

    amit singhabout 3 years ago

    rahmat aliabout 3 years ago

    mandavi tiwariabout 3 years ago

    rahul sharmaabout 3 years ago

    Ask question
    Latest video
    Learn Angular
    Profile pic
    Guest Back
    Username
    Password