Кнопка Вверх и вниз для сайта
827материалов
228тем на форуме
3004комментария
6159пользователей

Кнопка Вверх и вниз для сайта

Как правильно установить кнопку "Вверх и вниз" на сайт?

Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.
Код
<div style="display:none;" class="nav_up" id="nav_up">
     <img alt="↑" width="32" height="32" src="http://pnghosts.ru/img/2_u.ico" > </div>
     <div style="display:none;" class="nav_down" id="nav_down">
     <img alt="↓" width="32" height="32" src="http://pnghosts.ru/img/2_d.ico" > </div>
     <script>
     $(function() {
     var $elem = $('body');
         
     $('#nav_up').fadeIn('slow');
     $('#nav_down').fadeIn('slow');     
         
     $(window).bind('scrollstart', function(){
     $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
     });
     $(window).bind('scrollstop', function(){
     $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
     });
         
     $('#nav_down').click(
     function (e) {
     $('html, body').animate({scrollTop: $elem.height()}, 800);
     }
     );
     $('#nav_up').click(
     function (e) {
     $('html, body').animate({scrollTop: '0px'}, 800);
     }
     );
     });
     </script>


Это вставляем в "Таблица стилей (CSS)" в самый низ

Код
.nav_up{
     padding:2px;
     position:fixed;
     width:32px;
     height:32px;
     bottom:20px;
     opacity:0.7;
     right:30px;
     cursor: pointer;
     }
.nav_down{
     padding:2px;
     position:fixed;
     width:32px;
     height:32px;
     bottom:20px;
     opacity:0.7;
     right:66px;
     cursor: pointer;
     }


Готово.

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 07.12.2013 в 03:39
Материал просмотрен: 555 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта