info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 3171

Автор Сообщение
Не в сети
(Sak)  

Стаж: 2 года 2 месяца 29 дней
Сообщения: 22


Стиль: subsilver2


Репутация: 0


Russia



Себе на форум поставил такой небольшой скрипт через шаблоны в админке.
Преимущества очевидны:
Не нужно лезть в php-шники
Удобно использовать
Привычный вид (подобие десктопной версии ВК)

Итак, реализация кнопки "наверх"
Открываем Стили->Шаблоны->overall_header.html

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

<div class="scrolltotop" style="display: block;">
  <div class="scrolltotop__side"></div>
  <div class="scrolltotop__arrow"></div>
</div>
<script type="text/javascript">
jQuery.noConflict();
   jQuery(document).ready(function(){
            jQuery('body').append("<div class='scrolltotop'><div class='scrolltotop__side'></div><div class='scrolltotop__arrow'></div></div>");
          jQuery(window).scroll(function(){
            if (jQuery(this).scrollTop() > 350) {
                   jQuery('.scrolltotop').fadeIn();
            } else {
                   jQuery('.scrolltotop').fadeOut();
            }
        });
           jQuery('.scrolltotop').click(function(){
              jQuery("html, body").animate({ scrollTop: 0 }, 50);
            return false;
        });
    });0
</script>

Потом добавляем стиль кнопки.
Открываем Стиль->Темы->stylesheet.css
Вставляем вниз

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

.scrolltotop {
     display: none;
     position: fixed;
     width: 7%;
     top: 0;
     left: 0;
     height: 100%;
     z-index: 9000;
     cursor: pointer
 }
 .ipsTooltip a:hover {
     color: #fff;
     text-decoration: none;
     border-bottom: 0
 }
 .scrolltotop__side {
     position: fixed;
     width: 7%;
     height: 100%;
     top: 0;
     left: 0;
     background: black;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0.2);
     -moz-opacity: 0.1;
     -khtml-opacity: 0.1;
     opacity: 0.1
 }
 .scrolltotop__arrow {
     position: fixed;
     width: 7%;
     height: 100%;
     top: 50px;
     left: 0;
     background: url(*адрес_кнопки.gif*) top no-repeat;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)";
     filter: alpha(opacity=0.4);
     -moz-opacity: 0.4;
     -khtml-opacity: 0.4;
     opacity: 0.4
 }

Ширина блока и кнопки регулируется этим кодом {width: 7%}
Не забываем указывать адрес кнопки, поддерживаются как относительный, так и абсолютный адрес картинки
Вот такой вариант кнопки у меня Изображение


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


Последний раз редактировалось SAK 02 янв 2022, 00:49, всего редактировалось 2 раз(а).

Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 28 мар 2024, 19:07

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид