Главная » Статьи » Полезные статьи » Вебмастеру

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

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

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Вот такая кнопочка (вы можете видеть её в правом нижнем углу моего сайта, когда прокрутите страницу вниз), я считаю, должна быть на каждом сайте! Ещё бы, она так облегчает просмотр длинных страниц – не надо крутить страницу опять вверх, чтобы вернуться к меню, а нажал на кнопочку и – ты уже в начале страницы! К тому же это так красиво – страница красиво и плавно проматывается вверх, приятно смотреть Кнопочка размером 50x66, скрипт очень легкий и вы сможете спокойно подогнать под свой сайт. 

Установка: 

Для установки кнопки нужно зайти в Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> "Таблица стилей (css)" и вставить этот скрипт:

 .scrollup{width:50px;height:66px;position:fixed;bottom:10px;right:5px;display:none;text-indent:-9999px;background: url('http://bobsan.at.ua/knopka/knopka.png') no-repeat;opacity:0.5;} 
 .scrollup:hover{opacity:0.7;}

 

bottom:10px; - отступ с низу 
right:5px; - отступ справа
(http://bobsan.at.ua/knopka/knopka.png)- картинку кнопки можете заменить на свою 

 

После этого в ПУ -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта вставить код:

<!-- <Кнопка вверх> --> 
<a href="#" class="scrollup"></a> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(window).scroll(function(){ 
if ($(this).scrollTop() > 700) { 
$('.scrollup').fadeIn(); 
} else { 
$('.scrollup').fadeOut(); 

}); 
$('.scrollup').click(function(){ 
$("html, body").animate({ scrollTop: 0 }, 600); 
return false; 
}); 
}); 
</script> 
<!-- </Кнопка вверх> -->

 

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

Категория: Вебмастеру | Добавил: bobasan (06.06.2016)
Просмотров: 2352 | Теги: Кнопка вверх | Рейтинг: 5.0/1
Всего комментариев: 0
avatar
КОНТАКТЫ
Украина
Черкассы
Энгельса 50



+38 (098) 412-31-96 bobsan@at.ua
О проекте BobSan
BobSan.at.ua - сайт посвященный компьютерным технологиям и программному обеспечению. Сайт ежедневно обновляется и пополняется новыми программами, новостями, статьями. Все материалы распространяются абсолютно бесплатно.