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


----

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

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


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

Лена Спасибо!
я этот скрипт оказалось знаю ... странно, может у меня какой-то конфликт с другим js, хотя консоль ошибок молчит ...


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


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

Дело наверное в JQuery, потому что тому скрипту не все версии джиквери подходят, не на всех он работает)


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


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

Вот и я поставил эту прокрутку и гирлянда перестала шевелится и звенеть


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


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

Хех конфликты за конфликтами, буду глядеть. Ты случаем 2 раза джиквери не подрубил ?


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


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

DeaDRoMeO писал(а):

Ты случаем 2 раза джиквери не подрубил ?

Если только один раз в overal_header (гирлянда), а второй в overall_footer (стрелки) :du_ma_et:
Удалил
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 

в overal_header (гирлянда) - без изменений


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


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

St_roy писал(а):

Удалил

Из футера тогда попробуй удалить, а в хедере оставить


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


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

DeaDRoMeO писал(а):

Из футера тогда попробуй удалить

Я имел ввиду этот код
<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>
 

Здесь можно что-то удалить?


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


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

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


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


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

Да гирлянда-то пусть молчит и не шевелится, надоела))) Если в будущем будут ещё конфликты с этой прокруткой, поменяю или уберу.


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


Случайный аватар. Пользователю рекомендуется загрузить свой аватар в Настройках профиля

тоже конфликт...когда внизу страницы жмешь на кнопку "вниз" ,то поднимает вверх .И хоть так-хоть так- недопрокручивает/ Опера/ phpbbex


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


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

girl писал(а):

тоже конфликт

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


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


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

Стрелки - удобная функция. А то указательный палец уж болит двигать колесо)


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


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

Я так мышь убил уже)) Пришлось новую брать)


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


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

Всем привет!

Установил прокрутку а настроить не могу.Ребята помогите отрегулировать стрелки,а то в коде совсем ноль. Хотелось бы чтоб стрелки были по середине страницы справа.
Вот мой файл

Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку


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


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

Убрал прокрутку,к сожалению конфликтует со стилями. Жаль,полезный скриптик.


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


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

Хех, конфликтов не избежать


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


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

Подскажите, нашёл с двумя стрелками
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
решение:
<!--Кнопки в верх в низ-->
<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>
 

Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
у автора на форуме.
Вставляю в хедер (на то место, где до этого стояла одна кнопка "вверх", как у Сергея), получается вот так:
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку

Сами картинки при этом залил как и в скрипте прописано, т.е. images/btn_top.png и images/btn_bottom.png
Однако они не видны, хотя если нажимать на то, что на скрине показал, все работает как надо, т.е. прокручивается и вверх, и вниз.
Что ещё необходимо прописать, и где? Надо в css ещё что-то добавить?
Заранее спасибо за ответ, просто вариант этот понравился.


_________________
Подпись:
нуевонафигэтотавтомод
          Вернуться наверх  
 


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

Уберите флэш перед (надо так) - images, у вас вот так /images


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


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

maco8024 писал(а):

Уберите флэш перед (надо так) - images, у вас вот так /images

Спасибо огромное, получилось.
Только не ближе к низу, как по ссылке у автора, а по центру.


_________________
Подпись:
нуевонафигэтотавтомод
          Вернуться наверх  
 


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

В итоге поставил всё-таки другой вариант :-00): , т.к. мне он показался ещё поинтересней.
В нём две стрелки, и одна из них плавно исчезает, когда не нужна (если мы в самом вверху или низу страницы). Пример можно глянуть на моём форуме, кнопки сам нарисовал, чтоб ближе к стилю были, кому надо - поделюсь.

Заодно хотел спросить, правильно-ли я сделал, что всё это в футтер запихнул, перед </body>. Может быть надо отдельный файл .js создавать?
Подключение jQuery:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
 

JavaScript код:
<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: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="image/go_up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="image/go_bottom.png" alt="Вниз" title="Вниз">
</a>
 

Значение bottom: 60px у себя увеличил, т.к. стрелки нарисовал подлиннее.
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку
.


_________________
Подпись:
нуевонафигэтотавтомод
          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


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

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

Рубцовск

4

457

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

21 окт 2014, 06:33

Лена

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

DeaDRoMeO

88

6817

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

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