Как сделать стрелку "вверх" на сайте


Один из вариантов улучшения usability сайта – это установки стрелки для прокрутки страницы в верх. Сейчас рассмотрим как это делается.

Сразу скажу, данный пример будет работать только при наличии JQuery. В настоящий момент он присутствует практически на каждом сайте.

Во-первых нам нужен рисунок самой стрелки. Их сейчас премножество. Если ввести в поиске яндекса запрос «стрелка в верх», мы получим большое количество красивых стрелок. При необходимости можно указать чтоб она была формата PNG (с прозрачным фоном). Находим понравившуюся, скачиваем. Обработаем её в фотошопе (или кому где удобнее) чтоб она была например 60 на 60 пикселей.

Теперь будем размещать стрелку вверх на сайт.

Сделаем это через CSS свойство – background. Мне такой вариант больше всего нравится, т.к. появляется больше способов управления элементом. Но это уже кто как привык.

Добавим в таблицу стилей CSS следующий стиль:

#top-bottom {
width:60px;
height:60px;
background:url( "/pic/button_to_top.png ") 0px 0px no-repeat;
cursor:pointer;
position:fixed;
bottom:30px;
left:50%;
margin-left:520px;
z-index:9999;
}

Что же я тут написал?

Первые 2 свойства (width и height) это размер нашей картинки. Их можно изменять под любой размер.

Далее (background) нужно указать путь до вашей картинки.

Свойство cursor:pointer; - делает курсом мыши в виде пальца, когда он наведён на объект.

Следующие 4 свойства (position: fixed; bottom: 30px; left: 50%; margin-left: 520px;) тесно связаны. Первое фиксирует объект на странице так, что прокрутка скрола не влияет на его положение. Следующие 3 свойства ставят его правее относительно его изначального положения. С этими цифрами можно поэкспериментировать как хотите.

И последнее свойство ставит блок выше всех элементов на сайте.

Теперь  с самый низ страницы пишем:

<div id="top-bottom"></div>

Посмотрите что у нас получилось. Блок теперь находится где нужно, но пока что не реагирует на нажатия. Этим сейчас и займемся.

На каждой странице сайта, где присутствует этот блок ставим следующий код:

$(document).ready(function() {
        $("#top-bottom").click(function() {
                $("body,html").animate({
                        scrollTop: 0
                }, 500);
        });
});

Теперь при нажатии на стрелку страница будет прокручиваться в верх. Естественно JQuery уже должен быть подключен.

В коде приведённом выше, есть цифра 500. Это время, за которое страница должна достичь верха. Её можно изменять как вам удобно.

Казалось бы все, но нет. Когда страница и так в верху, нам эта стрелка не нужна. В этом случае добавим такой код:

if ($(window).scrollTop() > 100) {
        $("#top-bottom").fadeIn();
} else {
        $("#top-bottom").fadeOut();
}
$(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
                $("#top-bottom").fadeIn();
        } else {
                $("#top-bottom").fadeOut();
        }
});

Теперь когда страница прокручена меньше чем на 100 пикселей, стрелка в верх скрывается. В противном случае показывается. Очень удобно.

Сразу отмечу что данный пример будет некорректно работать в Internet Explorer < 9 версии. Связано это с тем, что они не поддерживают свойство position: fixed;. Но в последнее время пошла тенденция отказа от заточек сайтов под старые IE, поэтому я тоже решил не нагружать лишний раз сайт скриптами для IE.

Пример описанный в этой статье я как раз реализовал на данном сайте. Можете проверить ;)

 

 


Тэги:

Комментарии: 6

Прокомментировать »

 
 
Genn
25.07.2013
 

А чтоб в ie работало?

lavrik
25.07.2013
 

Чтоб работало в IE, достаточно небольшого хака в CSS, но я не вижу смысла лишний раз нагружать сайт. Сейчас, как известно, даже JQuery отказывается от IE (JQuery 2), и я с ними полностью солидарен.

лёня
12.08.2013
 

Старо как мир....

Владимир
28.07.2014
 

Ничего у меня не получается....

LAVRIK
29.07.2014
 

Подозреваю что у вас проблемы с JavaScript-ом. В этом случае вам в первую очередь нужно заглянуть в консоль браузера, чтоб найти проблему.

Надежда
9.09.2014
 

Спасибо, все получилось!

 

Прокомментировать

 
 
Сообщение *
 
Проверочный код *
 
 
 
Яндекс.Метрика