• Страница 1 из 1
  • 1
Как сделать кнопки прокруток Вверх-Вниз?
avatar
Местный | Оффлайн
Всем привет.  Хочу установить на сайт кнопки плавной прокрутки Вверх-Вниз, чтобы они были небольшого размера и желательно, полупрозрачные, чтобы не мешали чтению на маленьких экранах мобильного, но при наведении на них чтобы полупрозначный цвет менялся на другой, более насыщенный.  Может быть у вас есть какое-то готовое решение или что-то наподобие этого?  Буду вам весьма признателен!

Сообщение отредактировал Kot - Вторник, 13.03.2018, 11:36:08
[Сообщение # 1]  
avatar
Админ | Оффлайн

Код
<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://nbd.in.ua/img/icon_up.png" title="Вверх">
</a>
<a style='position: fixed; bottom: 250px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="hhttp://nbd.in.ua/img/icon-down.png" title="Вниз">
</a>


тут правда кнопки обычные, но если немного допилить, то можно сделать и с эффектом наведения


[Сообщение # 2]  
  • Страница 1 из 1
  • 1
Поиск:

close