Как добиться пользовательского API прокрутки страницы JQuery, как в этом примере?

Question

Недавно я наткнулся на один из проектов Google «Что вы любите» и увидел там замечательную функцию.

Если вы посетите http://www.wdyl.com/#monkeys Слева вы увидите маленькую коробку, которая позволяетпрокрутить страницу «Тихо и круто», подумал я, когда увидел ее))) Я посмотрел в Интернете, чтобы найти плагины jQuery или учебные пособия о том, как сделать подобное (jQuery / javascript - не моя сильная сторона), но я не смог

Так может кто-нибудь объяснить, как сделать подобный "Api / Feature" и предоставить фрагменты кода, если это возможно, это действительно поможет.Ох, решение JQuery предпочтительнее.

Answer 1

Вот простая демонстрация, которую я собрал, чтобы показать вам, как анимировать прокрутку страницы: http://jsfiddle.net/jasper/3cnKn/1/

В моем примере основная идея состоит в том, чтобы связать событие click для некоторых ссылок и анимировать scrollTop элемента html:

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

Answer 2

Как это часто бывает, лучше всего открыть инструменты разработчика вашего браузера и посмотреть, что на самом деле там происходит! В этом случае он выглядит как статический фон (серые прямоугольники) с синей рамкой сверху, как-то сделанный перетаскиваемым, который вызывает одну из функций прокрутки окна после выполнения арифметики с небольшим количеством пропорций, чтобы определить, как далеко прокручиваться.