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

Question

I'm trying to replicate the functionality of the Facebook timeline date selector/page scroller. This can be seen in the top right hand corner of a Facebook timeline page. When you select a year, using an animated affect, the page scrolls down the timeline to that specific year. Here's the code that I've been trying to get to work for me:

    <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>

The first thing I'm trying to do is just get the widow to scroll to the right div. Then, I would like to add an animation affect similar to Facebook's.

Answer 1

Please correct your code to:

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

You have to replace: window.moveTo() to window.scrollTo() . Or if that doesn't work, try this:

$("html, body").animate({
    top: offset.top,
    left: offset.left
});

Answer 2

经过更多研究并使用了一些不同的搜索词后，我偶然发现了一个可以解决我的问题的简单插件 ，因此我想与大家分享一下。