Кнопка 'Наверх'

Опубликовано: 12 Дек 2014

Делаем популярную кнопку 'Наверх', которая позволит нам плавно перемещаться в начало страницы.

Размещаем это код на те страницы, где мы хотим видеть нашу кнопку.

<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);
   });
    d.scroll(function() {
   var sv = d.scrollTop();
   if (sv < 10) {
   t.clearQueue().fadeOut(ops.hideDuration || 500);
   return;
   }
    t.css('display', '').clearQueue().animate({
   top: sv,
   opacity: 0.8
   }, ops.showDuration || 200);
   });
   };
   })(jQuery);
   </script>
   <div class="scroll-to-top-button" style="display: none;"></div>
   <script type="text/javascript">
   $(document).ready(function() {
   $.autoScroll({
   scrollDuration: 250,
   showDuration: 250,
   hideDuration: 250
   });
   });
</script>

Осталось только добавить css-стили и загрузить картинку на сервер:

.scroll-to-top-button {
    position: static;
    background: url("images/up.png") center center no-repeat;    
    width: 40px;
    height: 40px;    
    cursor: pointer;    
    margin: 10px;    
    position: absolute;
    top: 50%;
    left: 0px;
}

Не забывайте подключить библиотеку jQuery.

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: