FAQpk FAQpk.ru   Войти   Зарегистрироваться  


faqpk.ru
Компьютерный форум
С оплатой за сообщения



faqpk.ru

Страница 1 из 11
Компьютерный форум » Web-Мастер » Скрипты для сайта » Поднятие страницы наверх, плавное появление\ичезание кнопки (Скрипты для ucoz)
Поднятие страницы наверх, плавное появление\ичезание кнопки


На сайте уже был похожый материал "Кнопка наверх для ucoz", но этот скрипт ucoz на много лучше и удобней. Скрипт не имеет фиксирования на определенной точке сайта, кнопка плавно появляется только тогда, когда Вы начитаете опускать страницу вниз.

Вставляем код в CSS:
Code
#upBlock {    
     position:fixed;    
     top:15px;    
     left:15px;    
     background: #FFDDBB;    
     color:#000000;    
     padding:6px;    
     width: 45px;    
     text-align:center;    
     cursor:pointer;    
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=5);    
    -moz-opacity: 0.05;    
    -khtml-opacity: 0.05;    
    opacity: 0.05;    
     }


Вставляем код в любой из глобальных блоков(Первый контейнер, второй, верхняя часть сайта, нижняя) в любое место:
Code
<script>    
     $(document).ready(function(){    
     var opti = 0;    
    $(window).scroll(function(){    
     var scro = $(this).scrollTop();    

    if(scro > 100 && opti == 0){ $("#upBlock").animate({opacity:0.5},600); opti = 0.5; }    
    if(scro > 300 && opti != 1){ $("#upBlock").animate({opacity:1},600); opti = 1; }    

    if(scro < 100 && opti > 0){ $("#upBlock").animate({opacity:0.05},600); opti = 0; }    
    if(scro < 300 && opti == 1){ $("#upBlock").animate({opacity:0.5},600); opti = 0.5; }    

    });    
     $("#upBlock").click(function () {    
     $(window).scrollTop(0);    
     $("#upBlock").animate({opacity:0.05},600); opti = 0;    
     });    

     });    
    </script><div id="upBlock">Наверх</div>
Дата: Суббота, 23.06.2012. Сообщение # 1 Bro


На сайте уже был похожый материал "Кнопка наверх для ucoz", но этот скрипт ucoz на много лучше и удобней. Скрипт не имеет фиксирования на определенной точке сайта, кнопка плавно появляется только тогда, когда Вы начитаете опускать страницу вниз.

Вставляем код в CSS:
Code
#upBlock {    
     position:fixed;    
     top:15px;    
     left:15px;    
     background: #FFDDBB;    
     color:#000000;    
     padding:6px;    
     width: 45px;    
     text-align:center;    
     cursor:pointer;    
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=5);    
    -moz-opacity: 0.05;    
    -khtml-opacity: 0.05;    
    opacity: 0.05;    
     }


Вставляем код в любой из глобальных блоков(Первый контейнер, второй, верхняя часть сайта, нижняя) в любое место:
Code
<script>    
     $(document).ready(function(){    
     var opti = 0;    
    $(window).scroll(function(){    
     var scro = $(this).scrollTop();    

    if(scro > 100 && opti == 0){ $("#upBlock").animate({opacity:0.5},600); opti = 0.5; }    
    if(scro > 300 && opti != 1){ $("#upBlock").animate({opacity:1},600); opti = 1; }    

    if(scro < 100 && opti > 0){ $("#upBlock").animate({opacity:0.05},600); opti = 0; }    
    if(scro < 300 && opti == 1){ $("#upBlock").animate({opacity:0.5},600); opti = 0.5; }    

    });    
     $("#upBlock").click(function () {    
     $(window).scrollTop(0);    
     $("#upBlock").animate({opacity:0.05},600); opti = 0;    
     });    

     });    
    </script><div id="upBlock">Наверх</div>
Прикрепления: 7775426.png(1Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Компьютерный форум » Web-Мастер » Скрипты для сайта » Поднятие страницы наверх, плавное появление\ичезание кнопки (Скрипты для ucoz)
Страница 1 из 11
Поиск: