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

Администратор · Регистрация: 27.02.2009

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

jQuery плагин для автопрокрутки вверх страницы при нажатии на появляющуюся в правом углу стрелку.

Установка

В низ шаблона headinclude вставить:

PHP код:



<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>

Если jQuery библиотека уже подключена, то второй раз её подключать не нужно.

В шаблон header в самый верх вставить:

PHP код:



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

В Дополнительные определения CSS (во второе поле) вставить:

PHP код:



        .scroll-to-top-button{
            background: #666 url('images/scroll.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;
        }

И скопировать иконку scroll.png в папку images/

Скачать

Пользователь · Регистрация: 25.02.2012

Цитата:

В низ шаблона headinclude вставить:

Когда вставляю этот код апач на денвере вылетает...

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от 1ncom

Когда вставляю этот код апач на денвере вылетает

1ncom, поместите этот код

PHP код:



        (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
        });
    });

В файл scrollup.js (создаете его сами), скопируйте его в папку clientscript и добавьте в headinclude такой код:

PHP код:



<script type="text/javascript" src="clientscript/scrollup.js"></script>

Пользователь · Регистрация: 25.02.2012

не сработало, скрипт доступен, все норм, но просто ничего не появляется в additional.css все добавил, в хеадеринклуде добавил, скрипт создал добавил... ноль реакции...

Кстати пишет такое сообщение

Цитата:

Этот CSS файл устарел, и доступен здесь только для предоставления возможности ссылаться на него.

Эт норм?

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от 1ncom

Этот CSS файл устарел, и доступен здесь только для предоставления возможности ссылаться на него.

Цитата:

Сообщение от Vector

В Дополнительные определения CSS (во второе поле) вставить:

Это Для vbulletin 3, для vbulletin 4 я писал как надо - только в additional.css

А в шаблон header ?

Пользователь · Регистрация: 25.02.2012

Цитата:

Сообщение от Vector

Это Для vbulletin 3, для vbulletin 4 я писал как надо - только в additional.css

А в шаблон header ?

header`e тож все стоит....

Добавлено через 2 минуты
Может быть выложить полностью коды всех этих файлов?

Администратор · Регистрация: 27.02.2009

может путь до изображения тогда не тот:
background: #666 url('http://pcvector.ru/images/scroll.png') center center no-repeat;
попробуйте задать путь полностью: http://форум/images/scroll.png

Пользователь · Регистрация: 25.02.2012

Цитата:

Сообщение от Vector

/images/scroll.png

проверял, все нормально(((

Администратор · Регистрация: 27.02.2009

ещё раз.
в header в самый верх:

PHP код:



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

В headinclude в самый низ:

PHP код:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="clientscript/scrollup.js"></script>

в additional.css

PHP код:



        .scroll-to-top-button{
            background: #666 url('images/scroll.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;
        }

И страничку прокрутить не забудьте!

Пользователь · Регистрация: 25.02.2012

Спасибо, помогло, не хватало только

Цитата:

единственнное только, картинка со стрелкой появляется в верху страницы... какой параметр отвечает за низ, как на вашем форуме и какая переменная отвечает за фон? прозрачным бы его сделать....

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема Создание страницы	nynCuKaH	Вопросы по vBulletin 4.х	6	22.12.2011 09:42
Вопрос Автопрокрутка	Hamster	Вопросы по vBulletin 3.х	2	06.12.2011 14:51
Вопрос Адрес главной страницы	livecheg	Вопросы по vBulletin 3.х	6	06.09.2011 17:14
Новости Производство материнских плат тянет Gigabyte вверх, а ноутбуков — вниз	Jeffry Dahmer	Новости Hardware	0	01.10.2010 09:36
Инфо About: страницы в Google Chrome	Stive Stifler	Софт: Интернет и сеть	0	24.01.2010 00:27

1ncom #2
20 МГц Пользователь Вес репутации: 0 Регистрация: 25.02.2012 Сообщений: 79 Сказал(а) спасибо: 15 Поблагодарили 1 раз в 1 сообщении	Re: Автопрокрутка вверх страницы - 11.03.2012, 08:12 Цитата: В низ шаблона headinclude вставить: Когда вставляю этот код апач на денвере вылетает...

Vector #7
7560 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,247 Сказал(а) спасибо: 574 Спасибок 2,673 в 1,898 сообщениях	Re: Автопрокрутка вверх страницы - 12.03.2012, 00:04 может путь до изображения тогда не тот: background: #666 url('http://pcvector.ru/images/scroll.png') center center no-repeat; попробуйте задать путь полностью: http://форум/images/scroll.png

1ncom #8
20 МГц Пользователь Вес репутации: 0 Регистрация: 25.02.2012 Сообщений: 79 Сказал(а) спасибо: 15 Поблагодарили 1 раз в 1 сообщении	Re: Автопрокрутка вверх страницы - 12.03.2012, 00:08 Цитата: Сообщение от Vector /images/scroll.png проверял, все нормально(((