Кнопка "Вверх" для сайта
Кнопка "Вверх" является небольшим, но очень важным дополнением к функциональности вашего сайта или блога. Ведь просматривая анонсы публикаций очень удобно одним нажатием кнопки подняться вверх на начало странички, а не скроллить мышкой.
Особенно это удобно для сайтов или блогов с большим количеством статей или их анонсов на одной страничке.
Добавить кнопку "Вверх" не составит большого труда. Просто следуйте инструкциям ниже и будет вам маленькое, но весомое дополнение к удобству пользования вашим ресурсом. Существует несколько способов как добавить кнопку "Вверх", но в этой статье я расскажу о способе, который, на мой взгляд, более практичен и приятен для посетителей вашего сайта. Пример как раз на моем блоге (в правом нижнем углу, кто не нашел).
Итак, наша кнопка будет функционировать при помощи библиотеки 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 коммент. :
Отправить комментарий