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

Добро пожаловать на форум IP-Board.Ru - У нас есть хуки, стили и релизы IP.Board
Зарегистрируйтесь сейчас, чтобы получить доступ ко всем из наших особенностей. После регистрации и входа в систему вы сможете создавать темы, отвечать на сообщения в существующих разделах, изменять репутацию другим пользователям, получить возможность обмениваться личными сообщениями, обновления статуса, управлять профилем и многое другое.Если у вас уже есть аккаунт, войдите или зарегистрируетесь бесплатно!
Уважаемые пользователи IP-Board.ru , спешу сообщить, что каждую неделю администрация будет выкладывать VIP файлы для общего доступа.
Форум нуждается в активных участниках, для получения привилегий на форуме любой пользователь может оставить заявку тут Набор команды на форум. Внесите свой вклад на форум и форум Вас не забудет. ;)

Фотография

Кнопка "Наверх"

- - - - - js html css ipb button кнопка наверх

  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1
Offline Sergius

Sergius
  • Администраторы
  • 431 сообщений
  • 74 тем
103
  • Версия IP.Board:3.4.x

Награды

     

Доброе время суток, дорогие пользователи!
 
Я вам расскажу как добавить на ваш форум как вы уже поняли из название темы кнопку "Наверх"
Данная кнопка полностью совместима с ipb
 
Прикрепленный файл  2014-11-24_154112.png   925байт   5 Количество загрузок:
 
И так начнем:

Сначала мы добавим js код на основной шаблон форума.
Для этого мы идем:
Админ панель -> Внешний вид -> выбираем наш шаблон -> в категории "Глобальные" ищем название шаблона globalTemplate
 
ищем тег: </head>
 
и перед ним добавляем код:
 

<!-- Кнопка "Наверх" -->
<script type="text/javascript">
        jQuery(function() { 
                jQuery(window).scroll(function() {
                        if(jQuery(this).scrollTop() != 0) jQuery('#toTop').fadeIn();
                        else jQuery('#toTop').fadeOut();
                });
        jQuery('#toTop').click(function() {
                jQuery('body,html').animate({scrollTop:0},800);
        });
});
</script>

потом мы добавим html код.
в этом же шаблоне мы ищем: </body>
 
перед ним добавляем код:

<div id="toTop"> ^ Наверх ^ </div>

 
теперь остался последний этап, это подключить css, для того чтоб кнопка обрела свой вид

заходим в ipb_styles.css
 
и в конце файла добавляем
 

 

#toTop {
        width:100px;
        background: #FCFCFC;
        -webkit-box-shadow: rgba(0,0,0,0.12) 0px 0px 10px;
        -moz-box-shadow: rgba(0,0,0,0.12) 0px 0px 10px;
        box-shadow: rgba(0,0,0,0.12) 0px 0px 10px;
        padding: 6px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px; /* отступ кнопки от нижнего края страницы*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

#toTop:hover {
        background: #F5F5F5;
}

на этом все.
 
by Sergius


  • 0





Темы с аналогичным тегами js, html, css, ipb, button, кнопка, наверх

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных