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.

       //animate page to 0,0 on page reload by jquery.
       //Get the query string data
       var queryData = window.location.search;
       //Check wheather queryData is empty
            //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
                    //Stop looping if matches the value from extra looping

    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

    • How to get system ip through jquery or javascript ?

      This is not possible to access the IP address through javascript.

      • 0
      • 1
      • 0
      • facebook icon
      • twitter icon
      • google plus
    • Removing file extension

      Remove file extension via .htaccess

      • 1
      • 0
      • 1
      • facebook icon
      • twitter icon
      • google plus
    • Detect device by javascript

      A simple javascript to detect device

      • 335
      • 1
      • 335
      • facebook icon
      • twitter icon
      • google plus

    Latest quries posted

    gopa kumarabout 4 years ago

    amit singhabout 4 years ago

    rahmat aliabout 4 years ago

    mandavi tiwariabout 4 years ago

    rahul sharmaabout 4 years ago

    Ask question
    Latest video
    Learn Angular
    Profile pic
    Guest Back