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

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

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

автор 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>

Далее идём в ПА-модули-виджеты форума. Затем опускаемся вниз жмём "создать персональный виджет". "Использовать стандартный шаблон" выбираем нет. И вставляем код который я дал выше.