5 310 Скрипты / Scroll

Автопрокрутка вверх страницы

Стрелочка прокрутки до верха страницы на jQuery.

HTML

Один DIV блок, вставляем в любое место тела страницы:

<div style="opacity: 0.8; position: absolute; top: 450px; right: 0px; display:none;" class="scroll-to-top-button"></div>

CSS

Небольшая стилизация стрелки.

 .scroll-to-top-button{
            background: #777 url(up.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;
        }

jаvascript

Подключаем jQuery библиотеку и скрипт скроллинга:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <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 || 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>

Скачать 1732Загрузок 5,56 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи