Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Скрипт кнопок вверх-вниз

Опубликовано:

Есть скрипт

 

globalTemplate

<script type="text/javascript">
  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 }, 600);
           return false;
       });
   });0
</script>

 

ipb_styles.css

.scrolltotop {
display:none;
position:fixed;
width:3%;
top:0;
left:0;
height:100%
;z-index:9000;
cursor:pointer
}

.scrolltotop__side {
position:fixed;
width:4%;
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:4%;
height:100%;
top: 20px;
left:5px;
background: url("{style_images_url}/toto.png") 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
}

 

Это скрипт кнопка вверх.

Работает она так, когда находимся вверху стр и если где-то колесиком мыши 4-5 прокрутить вниз появляется кнопка вверх, как все и надо.

Но надо еще сделать кнопку вниз, до 4-5 прокрутки вниз, после чего кнопка вниз пропадает и появляется вверх после 4-5 прокрутов.

 

То есть объясню более в кратце Находимся на стр в самом вверху и слева кнопка вниз стр. 4-5 раза прокрутил колесиком мыши кнопка вниз пропадает, появляется кнопка вверх.

 

Может кто-то помочь ???

Изменено пользователем VetalDX

Рекомендованные сообщения

Опубликовано:

То есть объясню более в кратце Находимся на стр в самом вверху и слева кнопка вниз стр. 4-5 раза прокрутил колесиком мыши кнопка вниз пропадает, появляется кнопка вверх.

Если в рамках одной кнопки делать то

 

             jQuery("html, body").animate({ scrollTop: 0 }, 600);

вычисляем текущие координаты, если больше 350 идем вверх, если меньше вниз:

 

             jQuery("html, body").animate({ scrollTop: (jQuery(window).scrollTop() > 350) ? 0 : jQuery(document).height() }, 600);

Блок

 

           if (jQuery(this).scrollTop() > 350) {
                  jQuery('.scrolltotop').fadeIn();
           } else {
                  jQuery('.scrolltotop').fadeOut();
           }

убираем, чтобы кнопка была активна всегда.

При желании вместо .fadeIn() и .fadeOut() вместо одной стрелки элементу .scrolltotop__arrow можно поменять на противоположную.

Вообще в сети найдете полно готовых примеров с кодами кнопок вверх вниз.

  • 3 месяца спустя...
Опубликовано:
  • Автор

помогите реализовать под ipb

тыц (не реклама)

Опубликовано:

Если Jquery на странице подключен ничего отдельно для ипб адаптировать не нужно.

Опубликовано:
  • Автор

можете расписать что куда вставить ?

Опубликовано:

Вставляете также как и с аналогичными реализациями. Есть css, html, js. Js в head, html в body, css в либо style теге на странице либо css файле. Что здесь расписывать?.. Все это должно быть понятно на интуитивном уровне.

Опубликовано:
  • Автор

так делал белая стр получается

Опубликовано:
  • Автор

Все получилось, но есть одно но.

Тут нельзя выставить когда будет убираться кнопка вниз.

 

Описание:

Значение 250 в скрипте, показывает:

- в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;

- во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.

 

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

Изменено пользователем VetalDX

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.