如何创建Facebook时间轴样式日期滚动器？

我想复制Facebook时间轴日期选择器/页面滚动器的功能。这可以在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的动画效果。

来源

2012-06-23 MikeTheCoder

您必须将'window.moveTo（）'替换为'window.scrollTo（）'。 –

你可以查看这个http://www.technotarek.com/timeliner/timeliner.html –

请更正您的代码：

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

来源

2012-06-23 16:06:17

我有我的代码，我已经尝试了window.scrollTo以及似乎并没有工作。 – MikeTheCoder

好的，在这种情况下，试试这个。 '$（“html，body”）。animate（{top：offset.top，left：offset.left}）;' –

也没有工作。我只是打开并在另一个浏览器中尝试，以确保但没有运气。 – MikeTheCoder

做一些更多的研究和使用一些我偶然发现了一个simple plugin是解决我的问题有些不同的搜索词后，所以我想我会分享。

来源

2012-06-24 23:38:43 MikeTheCoder

如何创建Facebook时间轴样式日期滚动器？

回答

相关问题