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

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

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

faqpk.ru

Страница 1 из 1

1

Модератор форума: Steep

Компьютерный форум » 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)

Модератор

Сообщений: 196

Нет на сайте

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

Страница 1 из 1

1