?
Навигация?
? Главная
 Регистрация
 Форум
 Файловый архив

 Статистика
 Гильдии
 Игроки онлайн
 Правила сервера
 БАН ЛИСТ
Друзья сайта?
? [Global_Friends]
?
Главная » Файлы » Ucoz » Скрипты

Кнопки с функцией вверх и вниз на сайт
[ · Скриншот ] 07.12.2016, 22:28

Серые по своему дизайн кнопки для поднятие и опустить страницу на сайте. Все полностью создано на стилях и нет в нем не одной ссылки. Будут стоять с правой стороны монитора, также на них есть эффект. Который заключается в том, что при наведение из серой гаммы становится темнее, и безусловно знак виде пальца. Здесь тематика безусловно разная и можно сказать на любой сайт или блог можно поставить. Также нужно заметить, что идет плавный скролинг, что гораздо лучше быстрого и все с разбегом поднимает. Если будет показывать сразу 2 кнопки, то означает, сто вы опустили страницу или подняли и она находиться по центру или внизу, а так всегда вы будете видеть одну основном, когда выше поднимете и наоборот.

Установка: 

В низ сайта ставим Html для отображения кнопки

 
Код
<!-- Кнопки Вверх и Вниз -->  



  <div class="go-up" title="Вверх" id='ToTop'>☝</div>  



  <div class="go-down" title="Вниз" id='OnBottom'>☟</div>  



  <!-- / Кнопки Вверх и Вниз -->

 

 

И тут же далеко не уходим а ставим ниже скрипт.  

Код

<!-- Кнопки Вверх и Вниз -->  

  <script>  

$(function(){  

if ($(window).scrollTop()>="250" ) $("#ToTop").fadeIn("slow" )  

$(window).scroll(function(){  

  if ($(window).scrollTop()<="250")$("#ToTop") .fadeOut("slow")   

  else $("#ToTop") .fadeIn("slow") 

});  



if ($(window).scrollTop()<=$(document).height()-"999")$("#OnBottom") .fadeIn("slow")
$(window).scroll(function(){  

  if ($(window).scrollTop()>=$(document).height()-"999")  $("#OnBottom").fadeOut("slow")   

  else $("#OnBottom").fadeIn("slow")  

});  



$("#ToTop") .click(function(){$("html,body") .animate({scrollTop:0},"slow") })  

$("#OnBottom") .click(function(){$("html,body") .animate({scrollTop:$(document).height()},"slow") })  

});  

  </script>  

  <!-- / Кнопки Вверх и Вниз -->

CSS

Код

.go-up, .go-down {  
display: none;  
position: fixed; /*позиционирование*/  
z-index: 9999; /*поверх все элементов на странице*/  
right: 1%; /*положение на странице, если слева - left*/  
background: #4F4F4F;  
border: 1px solid #ccc;  
border-radius: 5px;  
cursor: pointer;  
color: #fff;  
text-align: center;  
font: normal normal 32px/32px sans-serif;  
text-shadow: 0 1px 2px #000;  
opacity: .5;  
padding: 3px;  
margin-bottom: 5px;  
width: 32px;  
height: 32px;  
}  
.go-up { bottom: 60px; }  
.go-down { bottom: 10px; }  
.go-down:hover,  
.go-up:hover {  
opacity: 1;  
box-shadow: 0 5px 0.5em -1px #666;  
}

 

 

 

 

 

Категория: Скрипты | Добавил: bodyakovsky2016
Просмотров: 57 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
avatar
Информация?
? Статус: [informer]
Реалм: [Name]
 Тип: [PvP]
 Дроп: [Rate]
 Убийство: [Rate]
 Реалмлист
Rip By Alexq