Кнопки UP & DOWN

Кнопки UP & DOWN 1.0

Нет прав для скачивания

Next

Регистрация
29.09.14
Сообщения
8,516
Симпатии
803
#1
Пользователь Admin разместил новый ресурс:

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

12.png

Кнопки UP & DOWN

Инструкция

Папку styles загружаем в корень форума.

Админка --> Внешний вид --> Шаблоны

Открываем шаблон: PAGE_CONTAINER

и перед тегом </head> добавляем:
Код:
<link media="screen" href="styles/top/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="styles/top/script.js"></script>
Далее находим тег </body> (самый низ) и перед ним добавляем:

Код:
<div class="go-up"...
Узнать больше об этом ресурсе...
 

Скриптик

Регистрация
03.10.15
Сообщения
5
Симпатии
1
#2
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 сообщениями.....;)