Скрипт кнопок вверх-вниз - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы оформления форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 2.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

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

#1 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 12 Июль 2015 - 17:35

Есть скрипт

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 (12 Июль 2015 - 17:36)

0

#2 Пользователь на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 728
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 12 Июль 2015 - 18:08

Просмотреть сообщение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 можно поменять на противоположную.
Вообще в сети найдете полно готовых примеров с кодами кнопок вверх <-> вниз.
1

#3 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 18 Октябрь 2015 - 18:50

помогите реализовать под ipb
тыц (не реклама)
0

#4 Пользователь на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 728
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 19 Октябрь 2015 - 15:05

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

#5 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 19 Октябрь 2015 - 18:40

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

#6 Пользователь на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 728
  • Регистрация: 20-Март 09
  • Репутация: 2 271
  • IPB version:3.1.x
 

Отправлено 19 Октябрь 2015 - 21:20

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

#7 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 19 Октябрь 2015 - 21:48

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

#8 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 21 Октябрь 2015 - 20:55

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

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

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

Сообщение изменено: VetalDX (21 Октябрь 2015 - 20:56)

0

Сообщить об этой теме:


Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна