如何創建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時間軸樣式日期滾動器？

回答

相關問題