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


В этой теме Вы можете задать вопрос о материале Кнопка Вверх / Вниз с плавным скролингом.
Прикрепления: 8292640.png (1.2 Kb) · 9185831.png (1.4 Kb)
[Сообщение # 1]  
avatar
Местный | Оффлайн
полезная штука
[Сообщение # 2]  
  • Страница 1 из 1
  • 1
Поиск:

close