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

Description: Программирование в HTML
Moderator: Aleksandr

LILUS M
Topic author, Старшина
Старшина
Avatar
LILUS M
Topic author, Старшина
Старшина
Reputation: 9
Posts: 131
Joined: 2 May 2013
With us: 6 years 3 months

#1by LILUS » 31 Jan 2014, 18:38

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

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

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

Image

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

Code: Select all


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


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

Code: Select all


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


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

Code: Select all

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


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

Code: Select all

    /*плавный переход к нужным блокам на странице*/
    
$('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. Таким образом, казалось бы простой скрипт придает странице «изюминку», а благодаря тому, что меню всегда доступно, посетителю становится удобнее перемещаться по странице.

! ! !


  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML”

Who is online (over the past 5 minutes)

Users browsing this forum: 1 guest