Кнопки UP & DOWN 1.0

Кнопки для плавного перемещения в обе стороны страницы

  1. Next

    Next Администратор

    Сообщения:
    5.611
    Репутация:
    73
    Рейтинг:
    +565 / -0
    Пользователь Admin разместил новый ресурс:

    Кнопки UP & DOWN - Кнопки для плавного перемещения в обе стороны страницы

    Узнать больше об этом ресурсе...
     
  2. Скриптик

    Скриптик Новичок

    Сообщения:
    5
    Репутация:
    6
    Рейтинг:
    +1 / -0
    js файл:
    Код:
    $(window).scroll(function() { // when the page is scrolled run this
        if($(this).scrollTop() != 0) { // if you're NOT at the top
            $('.xbScrollButtons').fadeIn("slow"); // fade in
        } else { // else
            $('.xbScrollButtons').fadeOut("slow"); // fade out
        }
    });
    
    $(function() {
        // the element inside of which we want to scroll
            var $elem = $('#content');
            // show the buttons
     
            // clicking the "down" button will make the page scroll to the $elem's height
        $('#xb_ScrollDown').click(
            function (e) {
                $('html, body').animate({scrollTop: $elem.height()}, 800);
            }
        );
            // clicking the "up" button will make the page scroll to the top of the page
        $('#xb_ScrollUp').click(
            function (e) {
                $('html, body').animate({scrollTop: '0px'}, 800);
            }
        );
    });
    (function(){
       
        var special = jQuery.event.special,
            uid1 = 'D' + (+new Date()),
            uid2 = 'D' + (+new Date() + 1);
           
        special.scrollstart = {
            setup: function() {
               
                var timer,
                    handler =  function(evt) {
                       
                        var _self = this,
                            _args = arguments;
                       
                        if (timer) {
                            clearTimeout(timer);
                        } else {
                            evt.type = 'scrollstart';
                            jQuery.event.handle.apply(_self, _args);
                        }
                       
                        timer = setTimeout( function(){
                            timer = null;
                        }, special.scrollstop.latency);
                       
                    };
               
                jQuery(this).bind('scroll', handler).data(uid1, handler);
               
            },
            teardown: function(){
                jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
            }
        };
       
        special.scrollstop = {
            latency: 300,
            setup: function() {
               
                var timer,
                        handler = function(evt) {
                       
                        var _self = this,
                            _args = arguments;
                       
                        if (timer) {
                            clearTimeout(timer);
                        }
                       
                        timer = setTimeout( function(){
                           
                            timer = null;
                            evt.type = 'scrollstop';
                            jQuery.event.handle.apply(_self, _args);
                           
                        }, special.scrollstop.latency);
                       
                    };
               
                jQuery(this).bind('scroll', handler).data(uid2, handler);
               
            },
            teardown: function() {
                jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
            }
        };
       
    })();
    css файл:
    Код:
    /* --- xb_scroll_buttons.css --- */
    
    .xbScrollButtons
    {
        position: fixed; right: 2%; bottom: 80px; z-index: 1000;
    
    }
    
    .xbScrollUpButton, .xbScrollDownButton
    {
        color: rgb(57, 72, 78);
    background-color: rgb(227, 227, 227);
    padding: 10px;
    border: 1px solid rgb(80, 103, 113);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
    white-space: nowrap; cursor: pointer; text-align: center; opacity: 0.3; transition: opacity 0.3 s ease-in-out;
    
    }
    .xbScrollUpButton:hover, .xbScrollDownButton:hover
    {
        color: rgb(33, 41, 44);
    border-color: rgb(65, 82, 89);
    opacity: 1;
    
    }
    @media (max-width:800px)
    {
        .xbScrollUpButton
        {
            padding: 7px;
            right: 1%;
        }
        .xbScrollDownButton
        {
            padding: 7px;
            right: 1%;
            bottom: 68px;
        }
    }
    
    /* --- xfa_blogs_nav.css --- */
    Вывод не люблю, не люблю когда очевидное скрывают под 5 сообщениями.....;)
     

Похожие темы
  1. Next
    Ответов:
    1
    Просмотров:
    244
  2. Hitman
    Ответов:
    11
    Просмотров:
    405
  3. kasim
    Ответов:
    0
    Просмотров:
    94
  4. Next
    Ответов:
    17
    Просмотров:
    355
  5. Len
    Ответов:
    1
    Просмотров:
    106
Загрузка...