Стрелка "вверх/вниз как в ВК" на основе Back2Top

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

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

Стрелка "вверх/вниз как в ВК" на основе Back2Top

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

На основе Back2Top - кнопки верх вниз
Пример работы - демо
Снимок.JPG
Снимок.JPG (17.88 КБ) 217 просмотров
Вставить в overall_header_head_append.html

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

<style>
#top-link {
	background-color: #ffffff;
	cursor: pointer;
	display: none;
	left: 0px;
	opacity: 0.2 !important;
		-moz-transition-property: opacity; -moz-transition-duration: 0.5s;
		-webkit-transition-property: opacity; -webkit-transition-duration: 0.5s;
		-o-transition-property: opacity; -o-transition-duration: 0.5s;
		transition-property: opacity; transition-duration: 0.5s;
	overflow: hidden;
	padding: 0;
	position: fixed;
	top: 0px;
	z-index: 1;
}
#top-link:hover{
	background-color: #e0e0e0;
	box-shadow: 0 0 5px 2px #9D9A93, inset 0 3px 18px rgba(100, 100, 100, .25);
	opacity: 1.0 !important;
		-moz-transition-property: opacity; -moz-transition-duration: 0.5s;
		-webkit-transition-property: opacity; -webkit-transition-duration: 0.5s;
		-o-transition-property: opacity; -o-transition-duration: 0.5s;
		transition-property: opacity; transition-duration: 0.5s;
}
	#top-link a {
		color: #105289;
		display: block;
		font-size: 11px;
		font-weight: bold;
		margin: 0 5px 5px;
		padding: 5px 0;
		text-align: center;
		text-decoration: none !important;
		width: 12px;
	}
		#topicon,
		#backicon {
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			margin-top: 4px;
			margin-left: -4px;
			position: absolute;
		}
		#topicon { border-bottom: 8px solid #105289; }
		#backicon { border-top: 8px solid #105289; position: absolute; }
		#b2t_text { padding-left: 15px; position: absolute; word-wrap: normal; }


/* адаптация под размеры окна */

@media only screen and (max-width: 1400px), only screen and (max-device-width: 1400px) {
	#b2t_text { display: none; }
}

</style>
Вставить в overall_footer_after.html

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

<script src="http://phpbb3.x-tk.ru/store/phpbb3_kabb_ru/images/Back2Top.js" type="text/javascript"></script>
Вставить в overall_header_page_body_before.html

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

<!-- IF not S_IS_BOT -->

	<div id="top-link">
		<a href="#top" id="top-link-a"><span id="topicon"></span><span id="b2t_text">Наверх</span></a>
	</div>

<!-- ENDIF -->

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

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

Стрелка "вверх/вниз как в ВК" на основе Back2Top

Сообщение Pussy » 26 окт 2016, 08:14

Merlin, только оно почему-то не прокручивает полностью до конца страницы вниз(


foxss
Сообщения: 8
Зарегистрирован: 22 окт 2016, 00:17
Поблагодарили: 9 раз
Пол:

Стрелка "вверх/вниз как в ВК" на основе Back2Top

Сообщение foxss » 26 окт 2016, 14:09

Pussy писал(а): Merlin, только оно почему-то не прокручивает полностью до конца страницы вниз(
так и задумано, оно прокручивает вниз до того места докуда прокручено вручную.

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

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

Стрелка "вверх/вниз как в ВК" на основе Back2Top

Сообщение Вчерашний борщ » 27 окт 2016, 18:40

Merlin, лично мне нравится больше вариант от silver073000, хотя сразу подумалось, что не хватает еще одной кнопки: прокрутки кусками или варианта вниз до места, с которого началась прокрутка (чаще всего будет БО), если к нему можно прикрутить еще кнопку с аналогом такого "вниз" как тут и без вызова чужого скрипта (все скрипты должны быть на своем форуме) - это был бы очень крутой вариант.
"Хочется сделать форум поддержки информативным и удобным :) " ©

Ответить