Кнопка Вверх и вниз для сайта - 8 Декабря 2013 - Орлы

x
65 годовщина Победы!
Четверг, 19.06.2025, 23:15

           Орлы! 

           

Главная Регистрация Вход
Приветствую Вас, Гость · RSS
Меню сайта
Время
Категории раздела
Новость [70]
Новость
Уведомления [189]
Мини-чат
Наш опрос
Топ танков
Всего ответов: 59
Форма входа
Подробная статистика
Подробная статистика посещения
СТАТИСТИКА
» Зарег. на сайте  
Всего: 114  
Новых за месяц: 0  
Новых за неделю: 0  
Новых вчера: 0  
Новых сегодня: 0  
» Из них  
   Администраторов: 1     
   Модераторов: 2
Модератор форума:
   Проверенных: 2     
Обычных юзеров: 109  
» Из них  
Парней: 109  
Девушек: 5  


Онлайн всего: 1
Гостей: 1
Пользователей: 0


Пользователи, посетившие
сайт за текущий день :
 
Главная » 2013 » Декабрь » 8 » Кнопка Вверх и вниз для сайта

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

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

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


Готово.
Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML

  • Просмотров: 344 | Добавил: Bitfood | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Copyright MyCorp © 2025
    Поиск
    Календарь
    «  Декабрь 2013  »
    Пн Вт Ср Чт Пт Сб Вс
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031
    последнее на форум
    Ответов: 13
    Форум: Общежитие

    Тема: UPD сайта
    Ответов: 23
    Форум: Дополнительно

    Тема: Анкета
    Ответов: 24
    Форум: Анкета

    Архив записей
    День Рождения
    Друзья сайта
  • Создать сайт
  • Официальный блог

  • Таблица цветов
    руб.
    Дорогие посетители, внесите пожертвование в развитие нашего проекта. Яндекс.Деньгами на счёт ########0282815 Оставить своё спасибо

    Создать бесплатный сайт с uCoz

    до Дня Победы осталось: