Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2014, 17:28
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 138

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

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

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

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


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

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2014, 18:36
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

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
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2014, 20:19
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 138

Сообщение от Octane Посмотреть сообщение
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.))
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2014, 21:39
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

http://jsfiddle.net/vlasenkofedor/2St2g/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавная прокрутка страницы Ultimatum jQuery 4 12.12.2015 22:23
прокрутка с использованием условия imedia Элементы интерфейса 0 08.06.2014 21:33
рандомная прокрутка в цикле alerzo Javascript под браузер 2 15.04.2013 12:01
Прокрутка баннеров по времени TTongorovortoto Работа 3 22.04.2011 13:35
прокрутка изображений RGun jQuery 3 08.03.2010 10:03