Автоматическая прокрутка к нужному блоку

Бывает заходишь на сайт, а он одностраничный. И мало того, что это сайт визитка, так у него ещё главная страница длинною в жизнь. Обычно такие сайты поделены на определённые блоки с информацией, которые наглядно показывают и описывают суть проекта на ресурсе которого вы находитесь.

Чтобы взаимодействовать с такими блоками было проще, мы установим скрипт, который будет автоматически прокручивать страницу в нужное место, после нажатия на соответствующую кнопку. Например внизу страницы находится блок с информацией о вас. Вверху сайта вы размещаете кнопку "О нас" и зашедший на сайт человек, которого в первую очередь интересует информация о вашем проекте, сразу перемещается в нужное ему место. Удобно.

Установка

Скачать архив и загрузить содержимое в папку js на вашем сайте.

В коде страницы, где будет использоваться прокрутка, между тегами head вставить следующее:

Далее нам нужно присвоить уникальный класс для ссылки, или кнопки, которая будет переносить нас к нужному блоку, например:

Как мы видим это обычная ссылка, внутри которой вместо адреса находится "указание" куда переместится.

Далее мы оборачиваем блок, к которому будем перемещаться после нажатия на кнопку "О нас" в div, то есть:

Установка завершена. Вместо класа "aboutus" вы можете создавать любые класы, а так же любое нужное вам количество.

Скачать: 6_sslide.zip [0.4 Kb] (cкачиваний: 3)

Поделись с друзьями