« Плавная кнопка вверх для uCoz »

Описание материала:

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

Для начала в таблицу стилей вставляем код:

Код
.scrollup{width:40px;height:40px;position:fixed;bottom:200px;left:160px;display:none;text-indent:-9999px;background: url('http://webmaster-ucoz.ru/w-u/img/vverkh.png') no-repeat;opacity:0.5;}
.scrollup:hover{opacity:0.7;}
bottom:200px; - отступ с низу
left:160px; - отступ слева
http://webmaster-ucoz.ru/w-u/img/vverkh.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 | Просмотров: 1066

Теги к материалу: Плавная, Вверх, ucoz, кнопка, для

Поделиться в соц. сетях:
Комментариев к материалу: 4
Deniss Lvov 29.06.2015 в 14:47Спам
Но кнопка не работает!!!
0
Роман 01.07.2015 в 16:32Спам
Так работает или нет? Вы уж определитесь!
0
Deniss Lvov 29.06.2015 в 14:42Спам
Спасибо, забрал!
0
Установил красиво выглядит спасибо)
0
avatar