Question

I have a simple jQuery click and scrollTO anchor script. I have another page, in which I link the content as index.php#home, index.php#about and so on…

How can I achieve the scrollTo effect from the external page? I’m thinking of linking the section as index.php?page=home and when the page loads, take the home variable and apply the animation.

Any other ideas?

EDIT, my code is below

$("nav a").click(function(event){
//prevent the default action for the click event
//event.preventDefault();

//get the full url - like mysitecom/index.htm#home
var full_url = this.href;

//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];

//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;

//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});

Answer 1

I think index.php?page=home is an easy way to go.

While index.php is being generated in php test for the variable being set using

if ( !empty($_REQUEST['page']) )

Make sure to filter all user input before you use it

$sanitizedPage = htmlentities($_REQUEST['page']);

Output javascript onto your page that calls the appropriate scrollto action when the page loads

<script type="text/javascript">
  window.onload = functionThatScrolls('<?php echo $sanitizedPage; ?>');
</script>

Here I assumed you have a javascript function that takes the anchor name as an argument to cause the scrollTo effect. If you are using jquery or another framework of course use their onload event handlers.