Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
VetalDX

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

Recommended Posts

Есть скрипт

 

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

 

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

Edited by VetalDX

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

Описание:

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

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

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

 

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

Edited by VetalDX

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...