Как прокрутить всю видимую страницу вниз до якоря с плавным эффектом (Scriptaculous или jQuery)?

Question

Я хочу создать навигацию с помощью якорей. При нажатии на навигационную ссылку вся видимая страница должна прокрутиться вниз до привязанного якоря.

Наиболее важной является следующая структура страницы.

--------------- (Begin visible browser area)
NAV1 nav2 nav3

content
--------------- (Begin/end visible browser area)
nav1 NAV2 nav3

content
--------------- (Begin/end visible browser area)
nav1 nav2 NAV3

content
--------------- (end visible browser area)

Наконец, все содержимое находится в одном документе, и высоту текущей страницы (выбранной с помощью элемента nav) необходимо рассчитать (с помощью библиотеки JS). Я предпочитаю PrototypeJS / Scriptaculous и jQuery.

Эффект прокрутки должен быть плавным слайдом / эффектом.

Chris

Answer 1

Если вам нужно решение jQuery, используйте ScrollTo , а если вам нужна только анимация на основе привязки, реализуйте связанный плагин LocalScroll.

Если вы хотите, чтобы области содержимого занимали всю видимую область браузера, вы можете установить это динамически при загрузке страницы (и при изменении размера браузера) также с помощью jQuery. Здесь есть отличное объяснение метода "высота" здесь .

Answer 2

См .: Effect.ScrollTo

<a href="javascript:// scroll" onclick="Effect.ScrollTo('element_id', { duration:'.5'})" />link</a>

Answer 3

Я думаю, что вы могли бы использовать этот скроллер: http://ruwix.com/simple-javascript-page-scroll-slider-jquery-scrollto-function-label-end Это самое короткое, что я нашел до сих пор, и это действительно просто. К сожалению, он прокручивает фиксированное количество пикселей, а не на метку, но вы можете использовать его идею.