2011-02-15 103 views
0

我有一个简单的jQuery点击和scrollTO锚脚本。我有另一个页面,其中我链接的内容为index.php#home,index.php#约等...从另一页面页面动画

如何从外部页面实现scrollTo效果?我正在考虑将该部分链接为index.php?page = home,并且在页面加载时,取回home变量并应用动画。

还有其他想法吗?

编辑,我的代码如下

$("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); 
}); 

回答

1

我想的index.php?页=家里是一个简单的方法去。

虽然在PHP测试产生了使用

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

确保你使用它

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

输出之前过滤所有的用户输入的变量被设置的index.php的JavaScript到您的网页当页面加载时调用适当的scrollto动作

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

这里我认为你有一个javascript函数,它将锚点名称作为参数来引起scrollTo效果。如果你正在使用jquery或其他框架,当然使用它们的onload事件处理程序。