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

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

Анимированная прокрутка темы снизу вверх. Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

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

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

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

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



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

Мужчина

Сообщения : 683
Возраст : 30
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

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

Сообщение автор doublecemik Июнь 29th 2011, 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
doublecemik
 

Мужчина

Сообщения : 75
Возраст : 87
Регистрация : 2011-04-05
Благодарности : 7

Без предупреждений

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

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

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

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

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

Мужчина

Сообщения : 683
Возраст : 30
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

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

Сообщение автор doublecemik Июнь 29th 2011, 22:18

Всегда рад yes
doublecemik
doublecemik
 

Мужчина

Сообщения : 75
Возраст : 87
Регистрация : 2011-04-05
Благодарности : 7

Без предупреждений

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

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

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

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

Вопрос закрыт.
Альберт Вескер
Альберт Вескер
 

Мужчина

Сообщения : 683
Возраст : 30
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

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

Вернуться к началу


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