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


----

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

 Сообщение Плавная Прокрутка(стрелки вверх и вниз) 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, по ЛС не отвечаю !!!
          Вернуться наверх  
 


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

Спасибо, всё встало отлично. Добавил только подсказки к кнопкам (для особо любопытных):
<div style="display:none;" class="nav_up" id="nav_up" title="{L_SCROLLING_UP}"></div><div style="display:none;" class="nav_down" id="nav_down" title="{L_SCROLLING_DOWN}"></div>


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


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

Тоже поставил у себя. Всё работает. Спасибо.


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


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

Отличный скрипт. Все работает. Только не смог поставить кнопки вертикально.


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


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

Дык все дело в CSS оформлении, оно прямо во вставляемом коде))


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


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

Разобрался. Спасибо.


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


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

Привет.
Подскажите в чем может быть проблема.
установила стрелки
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 

<script type="text/javascript">
jQuery(function(){
 $("#Go_Top").hide().removeAttr("href");
 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
 });

 $("#Go_Bottom").hide().removeAttr("href");
 if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
 });

 $("#Go_Top").click(function(){
  $("html, body").animate({scrollTop:0},"slow")
 })
 $("#Go_Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()},"slow")
 })
});
</script>
 

<a style='position: fixed; bottom: 128px; right: 2px; cursor:pointer; display:none;'href='#' id='Go_Top'><img src="http://сайт.ru/images/go_up.png" alt="Наверх" title="Наверх"></a>
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'href='#' id='Go_Bottom'><img src="http://сайт.ru/images/go_bottom.png" alt="Вниз" title="Вниз"></a>
 

отображаются на форуме. Но почему-то не отображаются в темах (( viewtopic.php


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


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

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


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


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

удалила jquery и всё заработало )) оказывается все было так просто. Спасибо )))


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


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

На здоровье)))


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


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

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

Рубцовск

4

457

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

21 окт 2014, 06:33

Лена

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

DeaDRoMeO

88

6818

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

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