» »

Кнопки с функцией вверх и вниз на сайт

Кнопки с функцией вверх и вниз на сайт

Серые по своему дизайн кнопки для поднятие и опустить страницу на сайте. Все полностью создано на стилях и нет в нем не одной ссылки. Будут стоять с правой стороны монитора, также на них есть эффект. Который заключается в том, что при наведение из серой гаммы становится темнее, и безусловно знак виде пальца. Здесь тематика безусловно разная и можно сказать на любой сайт или блог можно поставить. Также нужно заметить, что идет плавный скролинг, что гораздо лучше быстрого и все с разбегом поднимает. Если будет показывать сразу 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;  
}


PS - как видим кнопки сделаны красиво на стилях, что вам позволить изменить оттенок, если не вписывается по дизайн своему.
02.12.2016 Просмотров: 745 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
Kosten
Kosten 02.12.2016 15:111
0
Забыл написать, что этот скрипт проверен и он полностью работает.
Webmaster32
Webmaster32 02.12.2016 15:132
0
отредактируй новость
Kosten
Kosten 02.12.2016 15:173
0
Что именно отредактировать?
Webmaster32
Webmaster32 02.12.2016 15:234
0
то что скрипт проверен, и полностью работает
Kosten
Kosten 02.12.2016 15:295
0
Да все нормально, это первый комментарий, да и по скрину видно, что снять с монитора.
Kolinkor
Kolinkor 02.12.2016 17:246
0
Вот то что нужно, спасибо Webmaster32, на стилях давно искал, есть кнопка только вверх как здесь на сайте, а вот чтоб в низ не находил не как, вообще не думал что здесь найду.
Webmaster32
Webmaster32 02.12.2016 18:317
0
Не за что, я этот скрипт собирал из двух кусков насколько я помню
Kosten
Kosten 02.12.2016 18:458
0
Было дело, хотел спросить этот скрипт, но получилось по другому. А главное он наверно на любой системе работать будет. Но на конструкторе uCoz точно, так как проверял его.

Вот другое дело, браузеры, все будут показывать палец вверх.
Webmaster32
Webmaster32 02.12.2016 19:319
0
Да и антирекламщики не блокируют, а то что на всех система можно установить это верно
Kosten
Kosten 02.12.2016 19:3910
0
Редкий скрипт, чтоб на все площадки подходил.
Webmaster32
Webmaster32 02.12.2016 20:3011
0
Т к тут нет спец html тэгов которые бы делали его для определённой системы
Angerfist
Angerfist 02.12.2016 20:3912
0
Довольно часто попадаются комментарии, что js скрипт не работает на ucoz, начинают проклинать обновления движка конструктора или кодера написавшего скрипт (некоторые вообще ставят ссылку на массив скрипта "как есть, даже не проверив что кроется в недрах" с другого сайта и также клянут всё на чём мир стоит).
Причин конечно много, к примеру:
В силу того, что между компаниями производителями браузеров, постоянно идет конкурентная борьба, а так же не соблюдений этими компаниями требований консорциума WWW и спецификации HTML, увы, действительно один и тот же код скрипта может разными браузерами отображаться по-разному. А в некоторых случаях в одном браузере скрипт может работать прекрасно, а в другом браузере не работать вообще.
Сервисы подобные Ucoz, narod.ru и другие аналогичные конструкторы сайтов используют в своей работе свои собственные разработки. Как правило, подобные сервисы (конструкторы) позволяют создавать сайты из готовых блоков (модулей). При этом часто используют свои собственные языки программирования и разработки, которые подчас просто конфликтуют с общепринятыми языками программирования. В Интернете даже существует отдельное направление: Скрипты для Ucoz.
Кроме того подобные сервисы в большинстве случае умышленно ограничивают функционал размещенных у них сайтов. Ведь все скрипты создают дополнительную нагрузку на сервер и отнимают ресурсы сервера. Администраторам подобных сервисов проще закрыть большинство функций и возможностей для пользователей, чем разбираться с проблемами и проводить модернизацию своего оборудования, ведь в первую очередь это ДЕНЬГИ!
Вообщем в первую очередь смотрим в структуру скрипта, есть ли взаимодействие с тем же операторами юкоза и т.д., и тогда оговорка типа "работает не на всех системах" отпадёт.
Более развёрнуто можно прочитать Тут
avatar