28 июн 2011
Кнопка наверх с использованием jQuery
У нас вы можете скачать бесплатно Кнопка наверх с использованием jQuery

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

      });

   });




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, а и на других движках.

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









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
BuMiS | 28 июня 2011 12:06
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Спасибо 68

MySQL | 28 июня 2011 13:12
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

Скрин можно?

klim_kr93 | 28 июня 2011 17:40
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

Файл стилей, это preview.css ?

reservation | 28 июня 2011 20:29
  • Группа: Посетители |
  • Комментарий: 4 (ссылка)

Цитата: MySQL
Скрин можно?

знаю хде такой стаит!!!

ex1t | 3 июля 2011 13:47
  • Группа: Посетители |
  • Комментарий: 5 (ссылка)

на dle 9.3 не работает

95Osman | 7 июля 2011 00:09
  • Группа: Посетители |
  • Комментарий: 6 (ссылка)

ex1t,
и у меня

S.O.S. | 14 июля 2011 23:26
  • Группа: Посетители |
  • Комментарий: 7 (ссылка)

чет не пашет 61

xaklord | 21 июля 2011 15:25
  • Группа: Посетители |
  • Комментарий: 8 (ссылка)

Вот это код надо вставлять до </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>

Mycry | 7 августа 2011 11:39
  • Группа: Посетители |
  • Комментарий: 9 (ссылка)

xaklord >>#
Спасибо 4
На DLE 9.3 заработало

Tudeski | 16 октября 2011 13:35
  • Группа: Посетители |
  • Комментарий: 10 (ссылка)

на 9.4 не палит

SkiFteL | 5 ноября 2011 13:26
  • Группа: Посетители |
  • Комментарий: 11 (ссылка)

У меня почему то кнопка выводится под блоком? как исправить чтобы поверх было а то не возможно нажать!

Hitman1 | 1 января 2012 12:51
  • Группа: Посетители |
  • Комментарий: 12 (ссылка)

xaklord >># Спасибо!

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