Форум временно переведен в режим "Только для чтения". По вопросам технической поддержки, обращайтесь, пожалуйста на admin@getbb.ru

Стрелка "вверх/вниз" на основе Scroll Up Down

Интересные скрипты, хитрости, трюки с оформлением, "недокументированные" возможности, всяческие "довески" к форумам. HTML, CSS, JavaScript и т.п. (только готовые рецепты)
Правила форума
В этой теме выкладываем только готовые "рецепты", если у вас есть чем поделиться.
Пожалуйста, не нужно создавать темы с запросами на тот или иной скрипт
Ответить
Аватара пользователя

Автор темы
Merlin
Сообщения: 789
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 34 раза
Поблагодарили: 290 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Merlin » 25 окт 2016, 02:06

На основе Scroll Up Down - кнопки верх вниз
Пример работы - демо
Снимок.JPG
Снимок.JPG (12.2 КБ) 3635 просмотров
Вставить в overall_header_head_append.html

Код: Выделить всё

<style>
.go-up, .go-down {
 display: none;
 position: fixed; /*позиционирование*/
 z-index: 9999; /*поверх все элементов на странице*/
 right: 0%; /*положение на странице, если слева - left*/
 background: #4F4F4F;
 border: 1px solid #ccc;
 border-radius: 5px;
 cursor: pointer;
 color: #fff;
 text-align: center;
 font: normal normal 42px/42px sans-serif;
 text-shadow: 0 1px 2px #000;
 opacity: .5;
 padding: 3px;
 margin-bottom: 5px;
 width: 42px;
 height: 42px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;
 box-shadow: 0 5px 0.5em -1px #666;
}
</style>
Вставить в overall_footer_after.html

Код: Выделить всё

<div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>

<script>
$(function(){
 if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
   else $("#ToTop").fadeIn("slow")
 });

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

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

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

Кнора
Сообщения: 280
Зарегистрирован: 04 янв 2015, 15:28
Благодарил (а): 61 раз
Поблагодарили: 5 раз
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Кнора » 01 дек 2016, 16:42

Merlin писал(а): На основе Scroll Up Down - кнопки верх вниз
А для этого нужно как то удалять стандартно поставленную кнопку?

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

Автор темы
Merlin
Сообщения: 789
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 34 раза
Поблагодарили: 290 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Merlin » 02 дек 2016, 01:58

Кнора писал(а):
Merlin писал(а): На основе Scroll Up Down - кнопки верх вниз
А для этого нужно как то удалять стандартно поставленную кнопку?
Отключить расширение и установить этот скрипт.

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

Pussy
Сообщения: 365
Зарегистрирован: 09 июн 2016, 17:59
Благодарил (а): 35 раз
Поблагодарили: 30 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Pussy » 02 дек 2016, 09:32

Merlin, а можно вместо стрелок какую нибудь другую картинку, как это сделать?

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

Кнора
Сообщения: 280
Зарегистрирован: 04 янв 2015, 15:28
Благодарил (а): 61 раз
Поблагодарили: 5 раз
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Кнора » 02 дек 2016, 11:17

Merlin писал(а): Отключить расширение и установить этот скрипт.
Он автоматически встанет на всех стилях? Не только предустановленных? Или?

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

Автор темы
Merlin
Сообщения: 789
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 34 раза
Поблагодарили: 290 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Merlin » 04 дек 2016, 01:53

Кнора писал(а):
Merlin писал(а): Отключить расширение и установить этот скрипт.
Он автоматически встанет на всех стилях? Не только предустановленных? Или?
на всех

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

Pussy
Сообщения: 365
Зарегистрирован: 09 июн 2016, 17:59
Благодарил (а): 35 раз
Поблагодарили: 30 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Pussy » 27 фев 2018, 14:55

Merlin, вместо стрелок другую картинку как поставить?

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

beholder
Администратор
Сообщения: 1462
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 51 раз
Поблагодарили: 542 раза
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение beholder » 27 фев 2018, 15:35

Pussy,
стрелки заданы здесь:

Код: Выделить всё

<div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>
думаю, теоретически, можно попробовать в этом фрагменте вместо символа вписать код маленькой картинки по типу <img src="ссылка на картинку">
либо вставить либо значок шрифта FONT AWESOME, скажем из числа этих стрелок: https://www.w3schools.com/icons/fontawe ... tional.asp
например это: <i class="icon fa fa-chevron-circle-down">
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

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

Eclipse
Сообщения: 54
Зарегистрирован: 09 фев 2018, 13:30
Благодарил (а): 10 раз
Поблагодарили: 1 раз
Пол:
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение Eclipse » 28 фев 2018, 14:49

Я поставила скрипт в overall_header_body_before картинки поменяла на свои

Код: Выделить всё

<!--              Кнопки в верх в низ              -->
<div style="position:fixed; right:0.5%; bottom:45%;">
	            <a href="#top"><img src="http://storage9.static.itmages.ru/i/18/0213/h_1518550427_1432646_da70459c62.png" alt="В верх страницы" border="0" /></a> <br /><br /><a href="#bottom"><img src="http://storage1.static.itmages.ru/i/18/0213/h_1518550460_5824451_6831ff1de6.png" alt="В низ страницы " border="0" /></a> 
</div>
все работает
Изображение

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

lenok.1974
Сообщения: 1
Зарегистрирован: 13 сен 2023, 16:19
Благодарил (а): 2 раза
Контактная информация:

Стрелка "вверх/вниз" на основе Scroll Up Down

Сообщение lenok.1974 » 13 сен 2023, 16:24

Merlin писал(а):
25 окт 2016, 02:06
На основе Scroll Up Down - кнопки верх вниз
Пример работы - демо
Снимок.JPG

Вставить в overall_header_head_append.html

Код: Выделить всё

<style>
.go-up, .go-down {
 display: none;
 position: fixed; /*позиционирование*/
 z-index: 9999; /*поверх все элементов на странице*/
 right: 0%; /*положение на странице, если слева - left*/
 background: #4F4F4F;
 border: 1px solid #ccc;
 border-radius: 5px;
 cursor: pointer;
 color: #fff;
 text-align: center;
 font: normal normal 42px/42px sans-serif;
 text-shadow: 0 1px 2px #000;
 opacity: .5;
 padding: 3px;
 margin-bottom: 5px;
 width: 42px;
 height: 42px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;
 box-shadow: 0 5px 0.5em -1px #666;
}
</style>
Вставить в overall_footer_after.html

Код: Выделить всё

<div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>

<script>
$(function(){
 if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
   else $("#ToTop").fadeIn("slow")
 });

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

 $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
 $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
Приветствую! Спасибо за скрипт всё работает отлично. Только вопросик можно ещё сделать чтобы помедленнее была прокрутка? А так ваш единственный скрипт подошёл из всех что я ставила, ещё раз большое спасибо.

Ответить