Всё для Веб-Мастера » Всё для DataLife Engine » DLE-Разное » Кнопка наверх с использованием jQuery
Правила Контакты Чтение RSS

Кнопка наверх с использованием 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

P.S. Данный плагин работает не только на DLE, а и на других движках.

Внимание! У Вас нет прав для просмотра скрытого текста.



Скачать бесплатно Кнопка наверх с использованием jQuery на WebWel.ru

{repa}

twist

  • 28 июня 2011 19:38
  • Регистрация: --
  • Группа: Гости
  • Комментариев: 0
неработает на дле 9.2

{repa}

bizZz0n

  • 1 июля 2011 14:00
  • Регистрация: --
  • Группа: Гости
  • Комментариев: 0
НЕ может быть, т.к. это простейший javascript код, и должен он работать везде!

{repa}

optinet

  • 6 июля 2011 18:47
  • Регистрация: --
  • Группа: Гости
  • Комментариев: 0
Да просто руки кривые fellow

{repa}

turop73

  • 5 ноября 2011 21:11
  • Регистрация: --
  • Группа: Гости
  • Комментариев: 0
twist,
Лол :)

{repa}

REZ1DENT3

  • 11 февраля 2012 19:59
  • Регистрация: --
  • Группа: Гости
  • Комментариев: 0
Работает идеально. Спасибо огромное!

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Навигация ! ! !

Designed by EnerGY