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

[VetalDX 1]

Есть скрипт

 

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 раза прокрутил колесиком мыши кнопка вниз пропадает, появляется кнопка вверх.

 

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

Изменено 12 июля 2015 пользователем VetalDX

[siv1987 2628]

То есть объясню более в кратце Находимся на стр в самом вверху и слева кнопка вниз стр. 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 можно поменять на противоположную.

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

[VetalDX 1]

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

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

[siv1987 2628]

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

[VetalDX 1]

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

[siv1987 2628]

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

[VetalDX 1]

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

[VetalDX 1]

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

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

 

Описание:

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

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

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

 

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

Изменено 21 октября 2015 пользователем VetalDX