Плавное перемещение между блокам на веб-странице

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

Sun, 08 Dec 2013 22:56:21 +0400

Как правило при создании посадочных страниц (landing pages), на них размещается довольно много информации. Я нашел довольно удобный способ навигации по landing page, о чем и расскажу в этой статье.

Обычно меню, размещаемое на посадочной странице, – горизонтальное, а контент разделен на блоки. Казалось бы, нет ничего сложного в организации перемещения от блока к блоку: нужно присвоить идентификаторы к блокам и добавить их значения в ссылки меню. Однако, хотелось бы добавить странице динамичности, а посетителям - удобства. Поэтому, поступим следующим образом: зафиксируем блок с меню вверху страницы и обеспечим плавное перемещение по ней при взаимодействии со ссылками из меню.
Чтобы все это правильно работало, необходимо создать страницу, согласно схеме, показанной на рисунке.

Изображение

Схема страницы
Для фиксации верхнего меню, применим к элементу <header> следующие CSS-правила:

Код: Выделить всё


header 
{
    height: 145px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}


Чтобы блок с меню не закрывал блоки с контентом, сделаем у первого блока (section#block1) отступ сверху. Он должен быть равен высоте элемента <header>.

Код: Выделить всё


section
#block1{
    padding-top:145px;
}


На данный момент мы имеем вполне рабочую страничку, но при клике по ссылкам переход к блокам осуществляется сразу. Хотелось бы сделать так, чтобы переход от блока к блоку осуществлялся плавно. Этим сейчас и займемся. Нам поможет небольшой скрипт на jQuery. Обратите внимание, что версия библиотеки jQuery должна быть младше 1.9, иначе скрипт работать не будет. Я подключил jQuery 1.8.3 с сайта code.jquery.com

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>


После подключения jQuery перейдем непосредственно к скрипту: разместим его в разделе <head> страницы, или в отдельном JS-файле и подключим к нашей странице.

Код: Выделить всё

    /*плавный переход к нужным блокам на странице*/
    
$('nav a').on('click',function () {
        
elementClick = $(this).attr("href");
        $.
browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
        
// вычитаем высоту «шапки»
        
destination = $(elementClick).offset().top-145;

        if($.
browser.safari || $.browser.chrome){
            $(
'body').animate( { scrollTopdestination }, 1100 );
        }else{
            $(
'html').animate( { scrollTopdestination }, 1100 );
        }
        return 
false;
    }); 


Если мы все сделали правильно и нигде не ошиблись, то получили ожидаемый эффект. При клике по ссылкам переход от одного блока к другому будет происходить плавно, причем неважно в каком месте страницы вы «находитесь» в данный момент. Происходит все это благодаря функции animate() библиотеки jQuery. Таким образом, казалось бы простой скрипт придает странице «изюминку», а благодаря тому, что меню всегда доступно, посетителю становится удобнее перемещаться по странице.


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 4 гостя