prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Всё для DataLife Engine » DLE хаки » Кнопка наверх с использованием jQuery

Кнопка наверх с использованием jQuery


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Кнопка наверх с использованием 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, а и на других движках.

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


+3
Просмотры: 6878 VIP ProWebber | Комментарии (30)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Bain

  • 24 июня 2011 16:12
  • Регистрация: 13.09.2010
  • ICQ: --
  • Комментариев: 131
  • Выкл.
к dle хакам не относится, просто фича

--------------------

0

#2Julius

  • 24 июня 2011 19:43
  • Регистрация: 1.01.2011
  • ICQ: 622368858
  • Комментариев: 171
Спс, давно искал такую штуку:)

--------------------

+1

#3mandrivnuk

  • 24 июня 2011 20:44
  • Регистрация: 5.12.2009
  • ICQ: --
  • Комментариев: 41
Жаль что только в Хроме отображается(

0

#4smirnoff

  • 24 июня 2011 21:07
  • Регистрация: 25.05.2010
  • ICQ: 422474324
  • Комментариев: 4
  • Выкл.
mandrivnuk,
Отображается везде!

--------------------

0

#5mandrivnuk

  • 24 июня 2011 21:11
  • Регистрация: 5.12.2009
  • ICQ: --
  • Комментариев: 41
Не знаю...все так сделал..в ДЛЕ 9.3 в style.css в самый низ поставил в main тоже поставил но отображается только в ХРОМЕ.

0

#6PyroMan

  • 24 июня 2011 22:00
  • Регистрация: 25.02.2010
  • ICQ: 931408
  • Комментариев: 13
Спасибо, пригодилось!
P.S. в фаэрфоксе все прекрасно отображается ok

--------------------

0

#7dhshshshs

  • 24 июня 2011 23:33
  • Регистрация: 24.06.2011
  • ICQ: --
  • Комментариев: 1
Есть демо?

0

#8denison3260

  • 25 июня 2011 00:28
  • Регистрация: 24.12.2010
  • ICQ: --
  • Комментариев: 94
mandrivnuk, на 9.2 проверял - во всех последних браузерах работает.
dhshshshs вот здесь можешь посмотреть демо xbada.ru

0

#9NikiTUZka

  • 26 июня 2011 09:12
  • Регистрация: 23.09.2010
  • ICQ: 551791292
  • Комментариев: 73
Когда стрелка ездит по странице это не красиво, лучше сделать плавный подъем на jQuery но чтобы стрелка была только внизу.
Я себе давно уже ставил отсюда http://ruseller.com/lessons.php?rub=29&id=462

--------------------

0

#10bombei93

  • 26 июня 2011 12:22
  • Регистрация: 7.10.2010
  • ICQ: --
  • Комментариев: 65
NikiTUZka,
Спасибо большое, там реализация получше

0

#11nke

  • 26 июня 2011 15:20
  • Регистрация: 31.03.2011
  • ICQ: --
  • Комментариев: 20
Цитата: bombei93
NikiTUZka,
Спасибо большое, там реализация получше

Да реализация там красивее и удобнее, но у меня почему конфликтуют библиотеки и спойлеры не работают .

--------------------

-1

#12NikiTUZka

  • 26 июня 2011 16:33
  • Регистрация: 23.09.2010
  • ICQ: 551791292
  • Комментариев: 73
Цитата: nke
конфликтуют библиотеки и спойлеры не работают

Не нужно заливать файл jquery.js , т.к. он уже есть в системе.

--------------------

0

#13bombei93

  • 26 июня 2011 18:58
  • Регистрация: 7.10.2010
  • ICQ: --
  • Комментариев: 65
Как добавить ещё стрелку вниз?

0

#14wolf17

  • 30 июня 2011 03:42
  • Регистрация: 10.01.2010
  • ICQ: --
  • Комментариев: 63
А как эту стрелку вниз переместить?

0

#15vulkan

  • 30 июня 2011 13:11
  • Регистрация: 23.06.2011
  • ICQ: --
  • Комментариев: 11
Мода на стрелки началась гляжу biggrin

--------------------

0

#16Denisios

  • 2 июля 2011 20:35
  • Регистрация: 2.07.2011
  • ICQ: --
  • Комментариев: 68
Вот инструкция по тому как опустить данную стрелку в низ и сделать ее более практичной.

0

#17chib

  • 3 июля 2011 18:16
  • Регистрация: 9.03.2011
  • ICQ: 428910932
  • Комментариев: 7
Спасибо, полезно.

0

#18rion1

  • 5 июля 2011 11:07
  • Регистрация: 14.12.2010
  • ICQ: --
  • Комментариев: 6
Цитата: Denisios
Вот инструкция по тому как опустить данную стрелку в низ и сделать ее более практичной.

А ГДЕ инструкция, которая ВОТ?????

0

#19Denisios

  • 5 июля 2011 14:13
  • Регистрация: 2.07.2011
  • ICQ: --
  • Комментариев: 68
rion1, ссылку наверное удалили. Вот продублирую

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

0

#20linkoln

  • 7 июля 2011 01:36
  • Регистрация: 8.12.2010
  • ICQ: 2372307
  • Комментариев: 19
спс хорошая вещь!) good

--------------------

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

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки