如何在本例中實現自定義的jQuery頁面滾動API？

Question

我最近遇到了Google的一個項目「你喜歡什麼」，並在那裏看到了一個很棒的功能。

如果您訪問http://www.wdyl.com/#monkeys 在你的左邊，你會看到一個小盒子，可以讓你滾動頁面「幽涼」我想，當我看到它）））我看着在互聯網上找到的jQuery插件或教程上如何做類似的事情（jQuery/JavaScript不是我強大的一面），但我找不到任何。

所以任何人都可以請解釋如何做出類似的「Api /功能」，並提供代碼片段，如果可能的話，這真的會有所幫助。哦，一個jQuery解決方案是可取的。

Answer 1

經常出現這種情況，您最好打開瀏覽器的開發工具並查看實際發生的事情！在這種情況下，它看起來像是一個靜態背景（灰色框），頂部有一個藍色框架，以某種方式可拖動，在做了一些比例運算以確定滾動多遠之後調用窗口滾動功能之一。

Answer 2

下面是一個簡單的演示中，我放在一起向你展示如何製作動畫頁面滾動：http://jsfiddle.net/jasper/3cnKn/1/

在我的例子，其基本思想是綁定到一個click事件對一些鏈接和動畫scrollTophtml元件：

$('#nav').find('a').on('click', function (event) { 
    event.preventDefault(); 
    $('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500); 
});