我正在尝试复制Facebook时间轴日期选择器/页面滚动条的功能。这可以在Facebook时间线页面的右上角看到。当您使用动画效果选择年份时,页面会将时间轴向下滚动到该特定年份。这是我一直试图为我工作的代码:
<script type="text/javascript">
$(document).ready(function(){
$("ul a").click(function(event){
if($(this).hasClass("fourthlink")){
// get the coordinates of the fourth div
var offset = $("#sect4").offset();
// alert the y coordinate; I'm getting the right coordinate: 1062
alert(offset.top);
// Here's where I'm trying to move the page to the right spot
window.moveTo(offset.left,offset.top);
// I've also tired window.scrollTo(offset.left,offset.top);
}
})
});
</script>
我要做的第一件事就是让寡妇滚动到正确的div。然后,我想添加类似于Facebook的动画效果。
答案 0 :(得分:0)
请将您的代码更正为:
$(document).ready(function(){
$("ul a").click(function(event){
if($(this).hasClass("fourthlink")){
// get the coordinates of the fourth div
var offset = $("#sect4").offset();
// alert the y coordinate; I'm getting the right coordinate: 1062
alert(offset.top);
// Here's where I'm trying to move the page to the right spot
window.scrollTo(offset.left,offset.top);
// I've also tired window.scorllTo(offset.left,offset.top);
}
})
});
您必须将window.moveTo()
替换为window.scrollTo()
。或者,如果这不起作用,请尝试:
$("html, body").animate({
top: offset.top,
left: offset.left
});
答案 1 :(得分:0)
在做了一些研究并使用了一些不同的搜索词之后,我偶然发现了解决了我的问题的simple plugin,所以我想我会分享它。