ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Кнопка Вверх / Вниз на сайт uCoz

Кнопка Вверх / Вниз на сайт uCoz

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

Устанавливаем:

В низ сайта ставим скрипт:

Код
<script type="text/javascript">  
  jQuery(function(){  
  $("#Go_Top").hide().removeAttr("href");  
  if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")  
  $(window).scroll(function(){  
  if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")  
  else $("#Go_Top").fadeIn("slow")  
  });  

  $("#Go_Bottom").hide().removeAttr("href");  
  if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")  
  $(window).scroll(function(){  
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")  
  else $("#Go_Bottom").fadeIn("slow")  
  });  

  $("#Go_Top").click(function(){  
  $("html, body").animate({scrollTop:0},"slow")  
  })  
  $("#Go_Bottom").click(function(){  
  $("html, body").animate({scrollTop:$(document).height()},"slow")  
  })  
  });  
  </script>  

  <a style='position: fixed; bottom: 300px; right: 1px; cursor:pointer; display:none;'  
  href='#' id='Go_Top'>  
  <img src="http://zornet.ru/Aben/Abryn/icon_up.png" title="Вверх">  
  </a>  
  <a style='position: fixed; bottom: 250px; right: 1px; cursor:pointer; display:none;'  
  href='#' id='Go_Bottom'>  
  <img src="http://zornet.ru/Aben/Abryn/icon-down.png" title="Вниз">  
  </a>


PS - возможно такой набор кнопок кого то не устроит, то ЗДЕСЬ вы найдете больше тридцати и есть из чего выбрать.
01 Декабря 2016 Просмотров: 4879 Комментариев: (28)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 28
Kolinkor
Kolinkor 01 Декабря 2016 22:181
0
Точно, один такой скрипт ставил, так приложение Adguard приняла его за рекламный баннер. Это так поставил на время, все показывает, правда с правой стороны, мне привычнее с левой.
Webmaster32
Webmaster32 01 Декабря 2016 23:482
0
у меня стоит скрипт похожий на этот как две капли воды, только вместо изображения вверх/вниз стоит символ в виде пальца, на него adguard не реагирует

tsakonter
tsakonter 02 Декабря 2016 08:293
0
А это кнопки или на CSS создано.
Kosten
Kosten 02 Декабря 2016 14:165
0
Думаю что на стилях, возможно такие кнопки есть на ссылках, но не встречал.
Webmaster32
Webmaster32 02 Декабря 2016 14:276
0
1.Html для отображения кнопок
Код
  <!-- Кнопки Вверх и Вниз -->
  <div class="go-up" title="Вверх" id='ToTop'>☝</div>
  <div class="go-down" title="Вниз" id='OnBottom'>☟</div>
  <!-- / Кнопки Вверх и Вниз -->


2. Сам скрипт
Код
<!-- Кнопки Вверх и Вниз -->
  <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;
}
Kolinkor
Kolinkor 02 Декабря 2016 09:494
0
Ссылку можно - посмотреть.
Webmaster32
Webmaster32 02 Декабря 2016 14:327
0
ссылка на сайт в профиле
Kosten
Kosten 02 Декабря 2016 14:458
0
Закину на сайт в материалы. Просто у вас видел на сайте не плохо смотрится.
Webmaster32
Webmaster32 02 Декабря 2016 14:469
0
ок
noavatar
IDOCKERI 08 Января 2019 08:1410
0
Как сделать чтобы они были расположены не справа а слева?
Kosten
Kosten 08 Января 2019 16:0911
0
В коде найдите - right - и замените на left. Так как right отвечает за правую сторону, а left за левую, вам стоит их заменить.
noavatar
IDOCKERI 09 Января 2019 16:0012
0
А вы разбираетесь в bbcodах? Они уже готовы мне просто их нужно разместить сверху как кнопку при нажатии выводился код. Можете помочь?
Kosten
Kosten 09 Января 2019 16:3314
0
Переходим по ссылке на форум, там создает тему, как можно подробнее описываем.

Форум: zornet.ru/forum/115
waak
waak 09 Января 2019 22:5115
0
Тут всё просто и шарить не нужно так как система уже всё сделала за нас вам нужно только правильно разместить код и указать нужные классы

пример стандартной кнопки

Код
<input type="button" title="Code" value="code" onclick="simpletag('code','','','ТУТ ИД ПОЛЯ','')" class="codeButtons" id="codes">

Это пример кнопки code
First
First 09 Января 2019 16:1913
0
Цитата IDOCKERI ()
А вы разбираетесь в bbcodах? Они уже готовы мне просто их нужно разместить сверху как кнопку при нажатии выводился код. Можете помочь?

Создайте тему в соответствующем разделе форума и опишите подробно свой вопрос, что именно хотите. Там разберем и поможем, а здесь не место!
fart1kq
fart1kq 08 Сентября 2021 19:1116
0
Здравствуйте! Подскажите пожалуйста, кнопка появилась всё ок, как её перенести с права на лево?
Хочу что бы кнопка была слева
Kosten
Kosten 08 Сентября 2021 19:2917
0
Вы какую кнопку поставили? С материала или с комментариев. И оставьте в комментарий ссылку на сайт.. чтоб посмотреть кнопку.
fart1kq
fart1kq 08 Сентября 2021 19:3418
-1
С материала. https://freetoptor.ucoz.net/
Код вставил в нижнюю часть сайта, в самый низ
(стрелочки-картинки сам позже нарисую. Так как Ваших не видно)
fart1kq
fart1kq 08 Сентября 2021 19:3519
0
Извиняюсь, всё видно. то я кеш не почистил
Сопрано
Сопрано 08 Сентября 2021 19:4320
0
Вообще когда что то меняете на сайте, а тем-более добавляете стили или изменяете, то нужно обязательно чистить кэш браузера, особенно хромовские браузера, только после этого корректно будет показывать.
fart1kq
fart1kq 08 Сентября 2021 19:4721
0
Уже понял свою ошибку. Подскажите пожалуйста, как кнопку перенести на лево?
Kosten
Kosten 08 Сентября 2021 19:5725
0
Вот как одну перетащил, аналогично вторую также перетаскиваем, и редактируем по значению. Это в тот, если они не параленьно встанут, но думаю главное вам понятно.

1 2 »
Войдите:
avatar