Перейти к публикации
IPS Invision Community
  • Кнопка вверх без плагинов


    Sipsb
     Поделиться
    Подписчики 1

    И так начнем: Открываем наш стиль, в самый низ в globalTemplate ставим этот код:

    <a href="#" class="scrollup">Наверх</a>

    Это в custom css:

    .scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
    }

    При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и  50 px снизу.

    Теперь подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>...</head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    Затем сразу после подключения библиотеки необходимо в globalTemplate расположить следующий  код JQuery:

    <script type="text/javascript">
    $(document).ready(function(){
     
    $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
    $('.scrollup').fadeIn();
    } else {
    $('.scrollup').fadeOut();
    }
    });
     
    $('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
    });
     
    });
    </script>

    И так же Вам понадобится изображение самой стрелки:

    icon_top.png

     Поделиться

    Отзывы пользователей

    Рекомендованные комментарии

    Нет комментариев для отображения



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

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

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

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

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

    Войти

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

    Войти сейчас

×
×
  • Создать...
Вверх
Вверх