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

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

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

--------------- (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

Ответы [ 3 ]

3 голосов
/ 13 мая 2010

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

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

1 голос
/ 13 мая 2010

См .: Effect.ScrollTo

<a href="javascript:// scroll" onclick="Effect.ScrollTo('element_id', { duration:'.5'})" />link</a>
0 голосов
/ 09 января 2013

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

...