Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
VetalDX

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

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

07/12/15 14:36 (изменено)

Есть скрипт

 

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 можно поменять на противоположную.

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

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

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

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение
10/21/15 17:56 (изменено)

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

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

 

Описание:

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

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение

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

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

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

×
×
  • Создать...