Кнопка "Вверх" для сайта ~ Академия блогостроения

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

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

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

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

Итак, наша кнопка будет функционировать при помощи библиотеки jQuery, небольших фрагментов JS и CSS кода, а также изображения самой кнопки (лучше в формате .png). 

Для вызова самой кнопки вставляем HTML код в конце всего контента страницы перед закрывающим тегом </body> (Как редактировать HTML шаблон в Blogger можете посмотреть здесь)

<a href="#" class="scrollup">Наверх</a>




Подключаем библиотеку jQuery (если она у вас подключена, этот шаг можете пропустить)

Для этого необходимо между тегами <head> и </head> вставить следующее:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



Сразу после подключения jQuery вставляем код:

<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

});
</script> 



Здесь мы задаем условия когда появиться кнопке и с какой скоростью будет подниматься страница вверх. 

Значение scrollTop() > 100: кнопка "Вверх" будет автоматически появляться, когда положение полосы прокрутки относительно верхнего края страницы станет больше 100 пикселей. Вы можете изменять параметры в большую или меньшую стороны в зависимости от ваших предпочтений.

Значение animate({ scrollTop: 0 }, 600: до какого места будет подниматься страница (в нашем случае 0 пикселей - до самого верха) и с какой скоростью (в нашем случае скорость анимации 600 мс). 

Также можете изменять.


Добавляем CSS стили.

Для этого перед закрывающим тегом </b:skin> добавляем следующее:

.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url(url расположения картинки кнопки) no-repeat;
}



Здесь вы можете изменить свойства и расположение кнопки на странице:

  • прозрачность кнопки "Вверх" (opacity);
  • отступ снизу (bottom);
  • отступ от правого края страницы (right)


Если есть затруднения с url картинки, можете использовать мою: Кнопка "Вверх" для сайта.

На этом все, если имеются дополнения, замечания или вопросы - спрашивайте - отвечу, помогу.

0 коммент. :

Отправить комментарий