Question

我有一个简单的jQuery click和scrollTO锚点脚本。我有另一个页面，我将内容链接为index.php＃home，index.php＃about等等......

如何从外部页面实现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);
});

Answer 1

我认为index.php？page = home是一个简单的方法。

虽然在php测试中为使用

设置的变量生成了index.php

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

确保在使用之前过滤所有用户输入

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

将javascript输出到页面上，当页面加载时调用相应的scrollto动作

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

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

来自另一页的页面动画

1 个答案: