Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Анимированная прокрутка темы снизу вверх.

Предыдущая тема Следующая тема Перейти вниз

Решено Анимированная прокрутка темы снизу вверх.

Сообщение автор Альберт Вескер в Вт 28 Июн - 16:16

Доброго времени суток.
Хотелось бы по такому образцу оформить показ темы.
http://ruseller.com/lessons/les1150/scrolltotop.html

Т.е. пр прокрутке темы вниз, появляется стрелка, которая позволяет перейти вверх темы, причём анимировано.



Последний раз редактировалось: Альберт Вескер (Чт 30 Июн - 23:19), всего редактировалось 1 раз(а)

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Решено Re: Анимированная прокрутка темы снизу вверх.

Сообщение автор doublecemik в Ср 29 Июн - 18:12

Вот вам код smile

Код:
 <style type="text/css">
.nav_up{
  padding:7px;
  background-color:white;
  border:1px solid #CCC;
  position:fixed;
  background:transparent url(http://i23.servimg.com/u/f23/12/43/70/13/arrow_10.png) no-repeat top left;
  background-position:50% 50%;
  width:20px;
  height:20px;
  bottom:10px;
  opacity:0.7;
  left:30px;
  white-space:nowrap;
  cursor: pointer;
  -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
    -khtml-border-top-left-radius:3px;
  -khtml-border-top-right-radius:3px;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
  padding:7px;
  background-color:white;
  border:1px solid #CCC;
  position:fixed;
  background:transparent url(http://i23.servimg.com/u/f23/12/43/70/13/arrow_11.png) no-repeat top left;
  background-position:50% 50%;
  width:20px;
  height:20px;
  bottom:10px;
  opacity:0.7;
  left:70px;
  white-space:nowrap;
  cursor: pointer;
  -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
    -khtml-border-top-left-radius:3px;
  -khtml-border-top-right-radius:3px;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style><div style="display:none;" class="nav_up" id="nav_up"></div><div style="display:none;" class="nav_down" id="nav_down"></div>
<script src="http://www.patmax.eu/J1/110525224642.js" type="text/javascript"></script>
      <script type="text/javascript">
        jQuery(function() {
            var overelem = jQuery('body');
           
            jQuery('#nav_up').fadeIn('slow');
            jQuery('#nav_down').fadeIn('slow'); 
           
            jQuery(window).bind('scrollstart', function(){
              jQuery('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
            });
            jQuery(window).bind('scrollstop', function(){
              jQuery('#nav_up,#nav_down').stop().animate({'opacity':'1'});
            });
           
            jQuery('#nav_down').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
              }
            );
            jQuery('#nav_up').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: '0px'}, 800);
              }
            );
            });
        </script>
Далее идём в ПА-модули-виджеты форума. Затем опускаемся вниз жмём "создать персональный виджет". "Использовать стандартный шаблон" выбираем нет. И вставляем код который я дал выше.

doublecemik
 
 

Пол : Мужчина
Сообщения : 86
Возраст : 82
Карма : Без предупреждений
Благодарности : 6
Регистрация : 2011-04-05

http://gorlovka.gip-gip.com/forum

Вернуться к началу Перейти вниз

Решено Re: Анимированная прокрутка темы снизу вверх.

Сообщение автор Альберт Вескер в Ср 29 Июн - 21:26

У меня 2-я версия движка, так что я разместил код в шаблон (показ темы). Код работает, так как и хотелось. Спасибо.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Решено Re: Анимированная прокрутка темы снизу вверх.

Сообщение автор doublecemik в Ср 29 Июн - 22:18

Всегда рад yes

doublecemik
 
 

Пол : Мужчина
Сообщения : 86
Возраст : 82
Карма : Без предупреждений
Благодарности : 6
Регистрация : 2011-04-05

http://gorlovka.gip-gip.com/forum

Вернуться к началу Перейти вниз

Решено Re: Анимированная прокрутка темы снизу вверх.

Сообщение автор Альберт Вескер в Чт 30 Июн - 23:19

Вопрос закрыт.

Альберт Вескер
 
 

Пол : Мужчина
Сообщения : 684
Возраст : 26
Карма : Без предупреждений
Благодарности : 41
Регистрация : 2011-04-03

http://www.re-role.com

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения