Все для web-мастеров и создания сайта. » Полезное, разное » CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы

CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы

  • Новость
  • Похожие новости
Admin в 16час. 10мин. пишет:
 CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы


Приветствую всех постоянных читателей и гостей на сайте "Всё для вебмастеров и создания сайта". В этой небольшой и достаточно простой статье, я
расскажу вам о создании плавной автоматической прокрутки вверх (полезно для длинных сайтов), реализованной с помощью 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/)
Совместимость: Internet Explorer 7 - 9; Mozilla Firefox, Opera, Chrome, Safari.

Скачать стрелку: [attachment=35]

Новый вид topnews

Новый вид topnews


Новый вид вывода популярных новостей с небольшим пред просмотром для Dle.

Хак оформления фото

Хак оформления фото


Клевое оформление фото для вашего сайта.

Модуль Profile Reviews на Dle

Модуль Profile Reviews на Dle


Модуль предназначен для вывода сообщений у себя на сайте.

Поисковая форма для сайта с использованием CSS3

Поисковая форма для сайта с использованием CSS3


Поисковая форма является одним из часто используемых элементов веб интерфейса. Ее реализация на сайте является простым способом повысить привлекательность веб сайта в глазах пользователя. В данном уроке мы создадим стильную форму поиска с использованием особенностей CSS3.


Увеличение картинки при наведении курсора

Увеличение картинки при наведении курсора


Как можно сделать интересный эффект увеличения картинки при наведении на него курсора.



Просмотров: 487Дата: 10.10.11
  • Комментарии
  • Вконтакте
  • FaceBook

Какая у вас CMS ?

Datalife Engine
Joomla
Ucoz
Drupal
Wordpress
Другая