Перейти к содержанию
  • Кнопка вверх без плагинов


    Maiden8

    Открываем наш стиль, в самый низ в 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.e9730ab8cabac0d793c9c7dc422c77af.png


    Обратная связь

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

    @Maiden8 

    Не могли бы вы добавить скриншоты или видео в помощь? Я использую Google Translate и не могу понять некоторые из ваших руководств. Спасибо!

    Ссылка на комментарий
    Поделиться на другие сайты



    Присоединяйтесь к обсуждению

    Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
    Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

    Гость
    Добавить комментарий...

    ×   Вставлено с форматированием.   Вставить как обычный текст

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


×
×
  • Создать...