Страница 1 из 11
Форум про uCoz » Создание сайта на uCoz » Другие скрипты для uCoz » Скрипт простой кнопки вверх для сайта
Скрипт простой кнопки вверх для сайта
Kosten
Дата: Вторник, 01.08.2017, 18:30 | Сообщение # 1
Администраторы
Сообщений:15076
Награды: 49


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



Что и представляю скрипт, где по умолчанию стоит кнопка с надпись.И она рассчитана на темный дизайн. Но она под стилями стоит на ссылке и есть тема "Круглая кнопка вверх в 6 вариантах" где можете подобрать по цветку кнопку и поставит, а точнее просто заменить ее.

Приступаем к установке:

В CSS:

Код
.scrollup {width: 66px;height: 83px;position: fixed;bottom: 50px;left: 15px;display: none;text-indent: -9999px;background: url('http://zornet.ru/Aben/ABGER/vverkh.png') no-repeat;opacity: 0.5;}


Как видим в стилях в самом конце стоит opacity: 0.5; - что отвечает за прозрачность.

Остается в низ сайта поставить скрипт.

Код
<!-- <Вверх> -->
<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>
<!-- </Вверх> -->


Все после когда сохраните, то кнопка автоматически начинает работать на вашем сайте.
Прикрепления: 0407255.png(18Kb)
Страна: (RU)
Форум про uCoz » Создание сайта на uCoz » Другие скрипты для uCoz » Скрипт простой кнопки вверх для сайта
Страница 1 из 11
Поиск: