0

How to open a new page via url and scroll to div at a new page without using hash sign (#) ?

This is my code for scroll page to id="555" But not work.

To test my code please load page test.php?xxx=555

How can i do ?

test.php

....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var xxx = "<?PHP echo $_GET[xxx]; ?>";
    alert(xxx);

    var offsetHeight = document.getElementById(xxx).offsetHeight;
    var half_offsetHeight = +offsetHeight/2;
    alert(offsetHeight);
    alert(half_offsetHeight);

    var windows_client_height = $(window).height();
    var half_windows_client_height = +windows_client_height/2;
    alert(windows_client_height);
    alert(half_windows_client_height);

    var scroll_to_middle_page = +half_windows_client_height - +half_offsetHeight;
    alert(scroll_to_middle_page);

    $('html, body').animate({
        scrollTop: $("#"+xxx).offset().top-scroll_to_middle_page
    }, 200); 

});
</script>

<html>
<body>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<div id="555">55555555555</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</body>
</html>
mongmongmong seesee
  • 107
  • 2
  • 9

1 Answers1

1

You can use jquery to scroll on document ready to your element via its id

$(document).ready(function(){

   var xxx = "<?PHP echo $_GET[xxx]; ?>";
   var windowHeight = $( window ).height();

   // This will smoothly during 1000ms scroll to your element in webpage
   // till it not appear at the middle of screen
   $('html, body').animate({
       scrollTop: ( $("#"+xxx).offset().top - windowHeight )
   }, 1000);
});
Armen
  • 4,064
  • 2
  • 23
  • 40