如本例所示，如何实现自定义 jQuery 页面滚动 api？答案

【问题标题】：How to achieve custom jQuery page scroll api as in this example?如本例所示，如何实现自定义 jQuery 页面滚动 api？
【发布时间】：2011-11-29 17:45:35
【问题描述】：

我最近遇到了 Google 的一个项目“你喜欢什么”，并在那里看到了一个不错的功能。

如果您访问http://www.wdyl.com/#monkeys 在您的左侧，您会看到一个小框，允许您滚动页面“安静酷”我看到它时想）））我在互联网上查找 jQuery 插件或如何做类似事情的教程（jQuery/javascript不是我的强项），但我找不到。

那么任何人都可以解释如何制作类似的“Api/Feature”并在可能的情况下提供代码 sn-ps，这真的很有帮助。哦，最好使用 jQuery 解决方案。

【问题讨论】：

标签： javascript jquery html scroll

【解决方案1】：

通常情况下，最好的办法是打开浏览器的开发者工具，看看那里实际发生了什么！在这种情况下，它看起来像一个静态背景（灰色框），上面有一个蓝色框架，不知何故可拖动，在执行一些比例运算以确定滚动多远后调用其中一个窗口滚动函数。

【讨论】：

【解决方案2】：

这是我整理的一个简单演示，向您展示如何为页面滚动设置动画：http://jsfiddle.net/jasper/3cnKn/1/

在我的示例中，基本思想是为某些链接绑定到click 事件并为html 元素的scrollTop 设置动画：

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

【讨论】：