Javascript 如何实现本例中的自定义jQuery页面滚动api？

我最近遇到了谷歌的一个项目“What do you love”，并在那里看到了一个很好的功能

如果你访问 在你的左边，你会看到一个小框，允许你滚动页面（当我看到它的时候，我觉得“很酷”））我在互联网上查找jQuery插件或关于如何做类似事情的教程（jQuery/javascript不是我的强项），但我找不到任何

---

所以，请任何人解释一下如何制作类似的“Api/特性”，并尽可能提供代码片段，这将非常有帮助。哦，jQuery解决方案更可取。

正如经常出现的情况一样，您最好打开浏览器的开发工具，看看那里到底发生了什么！在这种情况下，它看起来像一个静态背景（灰色框），上面有一个蓝色框架，不知何故可以拖动，在做了一点比例运算以确定滚动的距离后，它调用了其中一个窗口滚动函数。

下面是我放在一起的一个简单演示，向您展示如何设置页面滚动的动画：

在我的示例中，基本思想是绑定到一些链接的

单击事件，并为
html
元素的
scrollTop
设置动画：

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