Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавная прокрутка к нужному ID (https://javascript.ru/forum/misc/47992-plavnaya-prokrutka-k-nuzhnomu-id.html)

StartGames 15.06.2014 17:28

Плавная прокрутка к нужному ID
 
Здравствуйте уважаемые пользователи и гости этого форума!

У меня вновь вопрос. Возможно он покажется очень простым, но в интернете никакой толковой информации не нашел.

Задание:
Нужен скрипт, который по клику плавно прокрутит до нужного ID на странице.

Есть такой вот код:
location.hash='id'


Но он моментально перекидывает пользователя к нужному ID, да и еще работает только 1 раз. Кстати, если не сложно - поправьте код чтобы он работал более 1 раза.

Спасибо. :-?

Octane 15.06.2014 18:36

1. вешаешь обработчик клика на документ и фильтруешь в нем клик по ссылке, ведущей на якорь http://learn.javascript.ru/bubbling-...-event-target
2. отменяешь (event.preventDeault) стандартное действие браузера - прокрутку к якорю http://learn.javascript.ru/default-browser-action
3. определяешь вертикальное положение элемента, к которому необходимо прокрутить страницу http://learn.javascript.ru/coordinates
4. плавно изменяешь document.scrollTop http://learn.javascript.ru/js-animation#основы-анимации http://learn.javascript.ru/metrics-window

StartGames 15.06.2014 20:19

Цитата:

Сообщение от Octane (Сообщение 316655)
1. вешаешь обработчик клика на документ и фильтруешь в нем клик по ссылке, ведущей на якорь http://learn.javascript.ru/bubbling-...-event-target
2. отменяешь (event.preventDeault) стандартное действие браузера - прокрутку к якорю http://learn.javascript.ru/default-browser-action
3. определяешь вертикальное положение элемента, к которому необходимо прокрутить страницу http://learn.javascript.ru/coordinates
4. плавно изменяешь document.scrollTop http://learn.javascript.ru/js-animation#основы-анимации http://learn.javascript.ru/metrics-window

А можете показать на примере?)

Вот у меня есть ссылка:
Код:

<a href="scroll#id74">Прокрутить к иду 74</a>
Вот к этому иду:
Код:

<div id="id74"></div>
И как по волшебству, по клике на ссылку происходит прокрутка к id74.))

Vlasenko Fedor 15.06.2014 21:39

http://jsfiddle.net/vlasenkofedor/2St2g/


Часовой пояс GMT +3, время: 01:29.