Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы
Не нравится(-) 4 Нравится(+)
19-09-2011, 01:17 - Razer (jQuery)
Урок jQuery 4 - Автопрокрутка страницы

Приветствую всех постоянных читателей и гостей Российской школе CSS. В этой небольшой и достаточно простой статье, я расскажу вам о создании плавной автоматической прокрутки вверх (полезно для длинных сайтов), реализованной с помощью CSS и jQuery.
Кстати, работу именно этого плагина можно наблюдать на страницах нашего сайта.

Сразу условимся, что стили и скрипты будем писать в режиме inline, то есть внутри html файла. Это целесообразно, из-за небольшого размера CSS стилей и самого скрипта.
Итак, первым делом создаём в нашем любимом Notepad++ (или кому в чем нравится) пустой html файл и записываем начало (заголовок, кодировку и подгружаем библиотеку jQuery)
<html>
<head>
<title>Автопрокрутка страницы вверх</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

Далее, как и условились, инлайном записываем стили:
    <style type="text/css">
        .scroll-to-top-button{
            background: #666 url(upload.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;
        }
    </style>

Где upload.png - картинка, которую мы применяем для кнопки запуска автопрокрутки (как правило - стрелка вверх). Поле под ней оформлено с помощью атрибутов CSS 3.0.
Далее - записываем сам скрипт:
<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>
</head>

Где активатор означает следующее:
scrollDuration: 2000 - длительность прокручивания в миллисекундах
showDuration: 600 - длительность появления кнопки при прокрутке в миллисекундах
hideDuration: 300 - длительность исчезновения кнопки в миллисекундах


Далее - идет произвольное и длинное содержание страницы. Не забудьте её закрыть:
</body>
</html>


Вот и всё. Спасибо за внимание к сайту и уроку! Стрелку можно взять из материалов урока.

Автор урока:INSIC DESIGNS (_http://blog.insicdesigns.com/2010/08/an-ultra-lightweight-autoscroll-to-top-jquery-plugin/)
Автор перевода: Алексей Иванченков, Российская школа CSS
Совместимость: Internet Explorer 7 - 9; Mozilla Firefox, Opera, Chrome, Safari.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 25362 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!