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

    • Tab 2 accordion responsive plugin

      Plugin that changes tabs to accordion

      • 318
      • 12
      • 318
      • facebook icon
      • twitter icon
      • google plus
    • Load images visible to user after page load

      Load only those image which is visible to visitor

      • 339
      • 8
      • 339
      • facebook icon
      • twitter icon
      • google plus
    • Hanging menu on window scroll

      After scrolling window beyond menu height, a floating bar appears at the top having same menu inside it.

      • 324
      • 12
      • 324
      • 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