Кнопка вверх и вниз для сайта


Юзабилити сайта и ранжирование в Яндекс

На мой взгляд любой нормальный интернет проект должен создаваться для людей (СДЛ) и в первую очередь помогать им в решении разного рода задач.

Кнопка вверх и вниз для сайта

Но достаточно часто можно засвидетельствовать тот факт, что даже качественный контент преподноситься не очень удобочитаемо. Любой сайт в первую очередь, должен быть удобен в использовании для конечного пользователя и такое качество, как юзабилити, является одним из основополагающих в поисковой выдаче.

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

Во всяком случае об этом написано в корпоративном блоге Яндекса. 🙂

О юзабилити сайта можно написать отдельную статью и даже не одну, но в целом концепцию улучшенного юзабилити можно выразить в одном предложении:

Пользователь сайта должен интуитивно чувствовать, что вебмастер или администратор веб ресурса в первую очередь думает о нем, а не о том, как заработать на своем интернет ресурсе по максимуму.

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

Самое главное это умеренность в размещении рекламных вставок, т. к. реклама все таки должна дополнять основной контент и предлагать альтернативные решения, а не наоборот.

Лично я с регулярным постоянством по возможности произвожу различные работы над улучшением юзабилити своих интернет проектов, и каждый раз что-то дополняю или улучшаю. 😉

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

В качестве примера приведу статью о том, как разблокировать компьютер от баннера классификации Winlock.  Данная статья является одной из самых популярных в этом блоге и содержит порядка 120 комментариев. Следовательно, пользователю необходимо будет приложить немного усилий для того, чтобы добраться вниз страницы и опубликовать свой вопрос (ответ, пожелание, благодарность).

С добавлением кнопки вниз, посетитель в одно нажатие будет прижат к футеру окажется возле формы добавления комментария! Естественно сразу после этого появится кнопка вверх и юзер сможет продолжить свое путешествие. По моему очень удобно. 😉

 Создание кнопки вверх и вниз для сайта без плагина

На мой взгляд наличие кнопки вверх на абсолютно любом сайте (причем неважно под управлением какой CMS он работает) можно отнести к правилам хорошего тона вебмастера, исключение может составлять только контент страницы состоящий из нескольких строк. 🙂

В этой статье я приведу несколько альтернативных примеров создания кнопки вверх, и пойду, как всегда от простого к сложному.

Первый вариант прост до неприличия и использует только чистый Html.

Добавляем в футер следующий Html код:

<a style='position:fixed; bottom:20px; right:10px; cursor:pointer;' href="#">
<img src="http://site/images/up.png" /></a>

После этого вам потребуется сделать хорошую кнопочку и правильно прописать к ней путь.

Если в первом варианте кнопка вверх стабильно находится в нижнем правом углу или в соответствии с заданными вами координатами, то во втором варианте она будет появляться только после скроллинга вниз страницы, а когда будет достигнут верх документа она снова исчезнет.

В таком варианте нужно будет добавить немного JavaScript, и подредактировать Html код:

<a style='position:fixed; display:none; bottom:20px; right:9px; cursor:pointer;' id="top">
<img src="http://
ваш_сайт/images/up.png" /></a>
<script type="text/javascript">
window.onload = function() {
var goTop = document.getElementById('top');
goTop.onclick = function() {
window.scrollTo(0,0);
};
window.onscroll = function () {
if ( window.pageYOffset > 0 ) {
goTop.style.display = 'block';
} else {
goTop.style.display = 'none';
}
};
};
</script>

Третий вариант реализации данной задачи подразумевает плавное перемещение, исчезновение и наличие кнопки вниз.  Для использования этого варианта необходимо будет подключить библиотеку JQuery.

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>

По большому счету jquery-latest.min.js можно скопировать с вышеуказанного ресурса и подключить локально.

Для подключения картинки и настройки координат нужно добавить в футер вот этот код:

<a style='position: fixed; bottom: 76px; right: 10px; cursor:pointer; display:none;' id='Top'><img src="http://site/путь/up.png"  title="Вверх">
</a>
<a style='position: fixed; bottom: 30px; right: 10px; cursor:pointer; display:none;' id='Bottom'><img src="http://
site/путь/down.png" title="Вниз">
</a>

После этого необходимо сделать вызов up-and-down.js в header.php

<script  type=‘text/javascript’ src=’http://site/js/up-and-down.js’></script>

Соответственно скрипт  up-and-down.js будет производить все дальнейшие навигационные манипуляции.

Скачать архив с исходниками up-and-down.js, а так же приложенными инструкциями  можно здесь.
Сегодня мой рабочий день был не очень загружен, и я смог создать полноценный архив с инструкциями, для скачивания. 🙂

P.S. Для WordPress в качестве альтернативы можно использовать плагин  Smooth Scroll Up, но я, как вы догадываетесь, решил сделать кнопки вверх и вниз для своего блога на WordPress без плагина. 🙂