Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Плавная Прокрутка(стрелки вверх и вниз) 2011-09-02

Аватар пользователя

Недавно накопал полезный скрипт плавной прокрутки страниц. Хорош он тем, что не надо круть колесиком мыши чтобы пролистать форум сверху донизу. Установка его проще некуда, справится даже новичок в этом деле. А пример работы вы сами сможете увидеть здесь, приглядитесь к левому нижнему краю своего экрана.
Установка скрипта
Скачиваем прикрепленный архив
Вложение :
110525224642.rar [32.94 KiB]
Скачиваний: 335

и распаковываем его в любое место в папке с вашим форумом. После открываем шаблон вашего стиля под именем overall_footer.html и перед тегом </body> вставляем следущий код
Цитата:
<style type="text/css">
.nav_up{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вверх") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вниз") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style><div style="display:none;" class="nav_up" id="nav_up"></div><div style="display:none;" class="nav_down" id="nav_down"></div>
<script src="http://полный путь до скрипта, скачанного выше/110525224642.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
var overelem = jQuery('body');

jQuery('#nav_up').fadeIn('slow');
jQuery('#nav_down').fadeIn('slow');

jQuery(window).bind('scrollstart', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
jQuery(window).bind('scrollstop', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

jQuery('#nav_down').click(
function (e) {
jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
}
);
jQuery('#nav_up').click(
function (e) {
jQuery('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Этот вариант подойдет для тех кому лень ковырять более 2-х файлов. А кому не лень и не всеравно на валидатор, то выкладываю другую, немного сложней инструкцию

Опять таки скачиваем, прикрепленный выше, архив и распаковываем его в любое место в папке с вашим форумом. После открываем шаблон вашего стиля под именем overall_footer.html и перед тегом </body> вставляем следущий код
Цитата:
<div style="display:none;" class="nav_up" id="nav_up"></div><div style="display:none;" class="nav_down" id="nav_down"></div>
<script src="http://полный путь до скрипта, скачанного выше/110525224642.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
var overelem = jQuery('body');

jQuery('#nav_up').fadeIn('slow');
jQuery('#nav_down').fadeIn('slow');

jQuery(window).bind('scrollstart', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
jQuery(window).bind('scrollstop', function(){
jQuery('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

jQuery('#nav_down').click(
function (e) {
jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
}
);
jQuery('#nav_up').click(
function (e) {
jQuery('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Открываем файл по пути /styles/ваш стиль/theme/stylesheet.css и в самый конец добавляем
Цитата:
.nav_up{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вверх") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;

position:fixed;
background:transparent url(http://полный путь до картинки "стрелка вниз") no-repeat top left;
background-position:50% 50%;
width:40px;
height:42px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Обязательно после этого чистим кеш на форуме и радуемся полученным результатам :(


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!

Теги темы
прокрутка страниц phpbb3, стрелка вверх, стрелка вниз, плавная прокрутка
          Вернуться наверх  
 


Аватар пользователя

Кнопку "вниз" убрал, всё работает


_________________
Подпись:
Зри в корень
          Вернуться наверх  
 


Аватар пользователя

Мдеее еще одна загадка, как может быть одна из кнопок всему виной, если код обеих кнопок почти идентичен


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Да не, после того, как я переправил панель и всё было нормально, кроме кнопки "вниз", она и подкидывала панель в ИЕ. Я её удалил и всё стало нормально работать.


_________________
Подпись:
Зри в корень
          Вернуться наверх  
 


Аватар пользователя

Попробуй тогда кнопки вверх и вниз отдельно от панели сделать


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Ставил, "вниз" не правильно работает. Уже привык без неё))


_________________
Подпись:
Зри в корень
          Вернуться наверх  
 


Аватар пользователя

Так может другой скрипт тогда поставишь? Который у меня на форуме используется


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Может как-нибудь, что-то не до прокрутки сейчас, весь мозг вынесла))


_________________
Подпись:
Зри в корень
          Вернуться наверх  
 


Аватар пользователя

Хах, мне уже довольно таки часто приходится ощущать полный вынос мозга, даже уже привык


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Что-то посмотрел на комментарии и понимаю, что этот скрипт много глючнее этого. Вот и задумался, стоит ли менять. Лучшее - враг хорошего.


          Вернуться наверх  
 


Аватар пользователя

Мне данный скрипт не очень нравится, по душе тот, который сейчас стоит)


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

DeaDRoMeO писал(а):

Мне данный скрипт не очень нравится

А чем именно не нравится?


          Вернуться наверх  
 


Аватар пользователя

Ну просто не по душе)) Не хочу у себя 2 кнопки))


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 


Аватар пользователя

Цитата:
Вот этот код вставляется в overal_header.html перед </head>
<!--Кнопки в верх в низ-->
<div style="position:fixed; right:0px; bottom: 45%;">
<a href="#top" onclick="jQuery('html, body').animate({scrollTop:0}, 'slow');return false;"><img src="./images/btn_top.png" alt="Вверх страницы" ></a>
<br/>
<a href="#bottom" onclick="jQuery('html, body').animate({scrollTop:document.documentElement.scrollHeight}, 'slow');return false;"><img src="./images/btn_bottom.png" alt="Вниз страницы" ></a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
 


И всё. Картинки стрелок просто перетащи с моего форума мышью на десктоп , затем закинь в папку /images). Если хочешь поменять цвет - отколорируй в фотошопе (имидж - аджастментс - хью сатюрейшн), двигая ползунками до нужного цвета.


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


          Вернуться наверх  
 


Аватар пользователя

Лена, как то высоко стоят стрелки, так неудобно.


_________________
Подпись:
Я уже прошел тот период когда можно было забывать про очистку кеша ©salexcorp
          Вернуться наверх  
 


Аватар пользователя

а как опустить? я просто перед head вставила и все
Вроде почти по середине экрана?


          Вернуться наверх  
 


Аватар пользователя

Лена писал(а):

а как опустить? я просто перед head вставила и все
Вроде почти по середине экрана?

Наверное мне показалось, просто верхняя кнопка длиннее нижней, вот и обманчивое восприятие. Но я себе всё равно 30% поставила (в коде 45%) от низа, для моей руки так удобней)). И верхнюю стрелку перевернула и вставила как нижнюю, чтобы по длине были одинаковыми.

Не знаю что твоим модераторам не понравилось, смотрится очень хорошо и цвет нужный подобрала.
...
ЗЫ. это только у меня между стрелками прощёлка? У других вроде всё слитно...


_________________
Подпись:
Я уже прошел тот период когда можно было забывать про очистку кеша ©salexcorp

Информация о редактировании
Последний раз редактировалось Lorem Ipsum 05 дек 2012, 14:29, всего редактировалось 1 раз.
          Вернуться наверх  
 


Аватар пользователя

у меня вроде щелки не видно, а у тебя видно. Но она очень гармонично смотрится. :co_ol:
Ты сегодня их меняла немного?
А то я скачивала у тебя стрелочки, размеры вроде другие были? У тебя сейчас пошире!


          Вернуться наверх  
 


Аватар пользователя

Да, я пошире сделала.


_________________
Подпись:
Я уже прошел тот период когда можно было забывать про очистку кеша ©salexcorp
          Вернуться наверх  
 


Аватар пользователя

DeaDRoMeO Подскажи пожалуйста а что за кнопочка вверх на этом форуме стоит? ато юзал разные, они грузят форум при прокрутке, а у тебя отлично работает, без тормозов ...


          Вернуться наверх  
 


Аватар пользователя

viewtopic.php?f=144&t=1063 вот эта


          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Стрелки вверх и вниз

Рубцовск

4

457

Аватар пользователя

21 окт 2014, 06:33

Лена

Аватар пользователя Плавная прокрутка 2(стрелка вверх)

DeaDRoMeO

88

6820

Аватар пользователя

06 сен 2016, 06:02

DeaDRoMeO

Аватар пользователя Banner Scroll Mod phpbb3 (Прокрутка баннеров на главной)
Banner Scroll Mod - модификация для phpbb3, добавляющая на главную страницу форума блок, в котором прокручиваются баннеры рекламодателей

DeaDRoMeO

68

4314

Аватар пользователя

30 апр 2017, 13:17

SergeiS

Аватар пользователя Быстрая цитата и Обратиться по нику не проматывают вниз

ursego

14

591

Аватар пользователя

28 мар 2014, 08:50

DeaDRoMeO

Аватар пользователя Кнопка "вверх" для Белка
Специально для Белка

Милена

2

652

Аватар пользователя

15 янв 2015, 08:43

белк

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P