кнопка вверх на всю ширину страницы

Доброго времени суток, дорогие читатели. Оригинальная кнопка вверх для блога во всю ширину страницы. Вполне современный дизайн. Думаю, что вашим посетителям понравится такое не стандартное решение кнопки вверх которая появится при скроллинге страницы. 
оригинальная кнопка вверх на всю ширину

Установка займёт считанные минуты, да и настройки внешнего вида тоже. Чтобы посмотреть, как она выглядит и проверить её в работе, перейдите на тестовый блог

Код

<script type="text/javascript">$('body').append('<div class="upbtn"></div>');         

$(window).scroll(function() {

    if ($(this).scrollTop() > 350) {

        $('.upbtn').css({

            bottom: 0

        });

        } else {

        $('.upbtn').css({

            bottom: '-80px'

        });

    }

});

$('.upbtn').on('click',function() {

    $('html, body').animate({

        scrollTop: 0

    }, 500);

    return false;

});</script>



<style>.upbtn {

    z-index: 9999;

    width: 100%;

    height: 16px;

    color: #FFF;

    position: fixed;

    bottom: -80px;

    cursor: pointer;

    background: #4e9c60;

    transition: all .3s ease-in-out;

}

.upbtn:before {

    content: "";

    transition: all .3s ease-in-out;

    z-index: 9999;

 

    width: 100px;

    height: 100px;

    border: 14px solid #4e9c60;

    position:relative;

    bottom:10px;

    left: 50%;

    margin-left: -50px;

    cursor: pointer;

    display:block;

    transform: rotate(45deg);

    background: #FFF;

}

.upbtn:hover {

    height: 20px;

}

.upbtn:hover:before {

    bottom:12px;

}</style>


Отрегулируйте на каком расстоянии при прокрутке она будет появляться. В моём случае это значение 350

В двух местах замените цвет на желаемый. В примере  #4e9c60

Готовый код устанавливайте в гаджет HTML/JavaScript , где нибудь в самом низу макета блога.

10 вариантов кнопки вверх для Блоггер
Оригинальная кнопка вверх/ вниз

Всем добра и до встречи. Не болейте, берегите себя и близких.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


10 комментариев:

  1. Весьма симпатичная и современная примочка!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Семён. Мне самой нравится.

      Удалить
  2. Здорово, мне понравилось. Я код не посмотрела, а ширину самой линии можно сделать тоньше?

    ОтветитьУдалить
  3. Не поставила ударение, здОрово, а то прочла свой комментарий, выглядит, как будто это я так грубо поздоровалась.

    ОтветитьУдалить
    Ответы
    1. Наталья, я поняла Вас правильно, не переживайте. Значение ширины height: 16px;Но тут же надо поиграться с bottom:12px; и border: 14px. Пробуйте.

      Удалить
  4. Прикольная кнопочка, надо как-нибудь попробовать...)))

    ОтветитьУдалить
    Ответы
    1. Елена, просто готовый код пробуйте, встал нормально экспериментируйте со стилями.

      Удалить
  5. Спасибо за разъяснения. Обязательно поставлю, очень удобная кнопка.

    ОтветитьУдалить
  6. Здравствуйте, Вика! Попробовала поставить кнопку. Не отображается! Поясните, пожалуйста, что не так? А вот фиксированное меню очень удалось! Спасибо! https://toropej.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Татьяна, здравствуйте. Не знаю, почему. На трёх блогах тестировала. Я посмотрела код шаблона Вашего. Кнопка вверх-вниз которая стоит работает на тоже
      на джава скрипт. Видимо конфликт у них. Скорее всего.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск