Мы в твиттере Мы в телеграме!

Провеббер » DataLife Engine » DLE хаки » Кнопка наверх с использованием jQuery

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

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

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

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


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


+2
Просмотры: 8 433 :: Комментарии (30) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Bain

  • 24 июня 2011 16:12
  • Регистрация: 13.09.2010
  • Был(а) онлайн: 13.03.2021
  • Комментариев: 131
  • 0
к dle хакам не относится, просто фича

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

#2Julius

  • 24 июня 2011 19:43
  • Регистрация: 1.01.2011
  • Был(а) онлайн: 19.06.2016
  • Комментариев: 171
  • +1
Спс, давно искал такую штуку:)

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

#3mandrivnuk

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

#4smirnoff

  • 24 июня 2011 21:07
  • Регистрация: 25.05.2010
  • Был(а) онлайн: 13.12.2015
  • Комментариев: 4
  • 0
mandrivnuk,
Отображается везде!

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

#5mandrivnuk

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

#6PyroMan

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

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

#7dhshshshs

  • 24 июня 2011 23:33
  • Регистрация: 24.06.2011
  • Был(а) онлайн: 29.06.2011
  • Комментариев: 1
  • 0
Есть демо?

#8denison3260

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

#9NikiTUZka

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

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

#10bombei93

  • 26 июня 2011 12:22
  • Регистрация: 7.10.2010
  • Был(а) онлайн: 5.07.2013
  • Комментариев: 65
  • 0
NikiTUZka,
Спасибо большое, там реализация получше

#11nke

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

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

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

#12NikiTUZka

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

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

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

#13bombei93

  • 26 июня 2011 18:58
  • Регистрация: 7.10.2010
  • Был(а) онлайн: 5.07.2013
  • Комментариев: 65
  • 0
Как добавить ещё стрелку вниз?

#14wolf17

  • 30 июня 2011 03:42
  • Регистрация: 10.01.2010
  • Был(а) онлайн: 9.07.2015
  • Комментариев: 63
  • 0
А как эту стрелку вниз переместить?

#15vulkan

  • 30 июня 2011 13:11
  • Регистрация: 23.06.2011
  • Был(а) онлайн: 20.02.2023
  • Комментариев: 11
  • 0
Мода на стрелки началась гляжу biggrin

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

#16Denisios

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

#17chib

  • 3 июля 2011 18:16
  • Регистрация: 9.03.2011
  • Был(а) онлайн: 24.06.2014
  • Комментариев: 7
  • 0
Спасибо, полезно.

#18rion1

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

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

#19Denisios

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

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

#20linkoln

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

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

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

Архив новостей
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)
Июнь 2024 (30)

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