Кнопка Вверх и вниз для сайта - Форум ProUcoz.com - Кнопка Вверх и вниз для сайта - Форум ProUcoz.com
Четверг 16:51 | 19.01.2017
Свежие темы · Участники · Правила форума · Поиск · RSS
Страница 1 из 11
Модератор форума: GrandDooM, FR3cH 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Кнопка Вверх и вниз для сайта
Кнопка Вверх и вниз для сайта
Канадаfafirok[Нет на сайте]
Дата: Четверг, 12.12.2013, 21:03 | Сообщение # 1
Сообщений: 208
скрин: http://i069.radikal.ru/1311/53/fb56c55c2ad2.jpg

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

Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код
<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">
  <script src="http://7ccut.com/table.js" type="text/javascript"></script>
  <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;
     }

    
Готово.


fafirok
 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Кнопка Вверх и вниз для сайта
Страница 1 из 11
Поиск: