Page animation from another page
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 th开发者_开发技巧e 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);
});
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.
精彩评论