jQuery Кнопка на верх

jQuery Кнопка на верх

Простая кнопка с использованием jQuery плагина.

jQuery Кнопка на верх

Установка:
1. В файле main.tpl, перед тегом

</head>


вставляем следующий код:

<script type=»text/javascript»>

  

      (function(jq) {

         jq.autoScroll = function(ops) {

         ops = ops || {};

         ops.styleClass = ops.styleClass || ‘scroll-to-top-button’;

         var t = jq(‘<div class=»‘+ops.styleClass+'»></div>’),

            d = jq(ops.target || document);

         jq(ops.container || ‘body’).append(t);

         t.css({

            opacity: 0,

            position: ‘absolute’,

            top: 0,

            right: 0

         }).click(function() {

            jq(‘html,body’).animate({

               scrollTop: 0

            }, ops.scrollDuration || 1000);

         });

         $(window).scroll(function(){

            var sv = d.scrollTop();

            if (sv < 10) {

               t.clearQueue().fadeOut(ops.hideDuration || 200);

               return;

            }

            t.css(‘display’, »).clearQueue().animate({

               top: sv,

               opacity: 0.8

            }, ops.showDuration || 500);

         });

      };

   })(jQuery);

   $(document).ready(function(){

      $.autoScroll({

         scrollDuration: 2000,

         showDuration: 600,

         hideDuration: 300

      });

   });

  

</script>

2. В файле стилей дописываем следующий css код:


/*Кнопка наверх*/
.scroll-to-top-button{ background: #666 url(«../images/ups.png») center center no-repeat;
    width: 32px;
    height: 32px;
    color: #fff; font-family: verdana;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 20px;
}

3. Скачиваем картинку и заливаем на сервер в templates/имя шаблона/images

Прикреплённые файлы:
Файл: ups.rar
Размер: [2,74 Kb] (забрали: 51 раз)