Все варианты кнопок реализованы довольно просто и не используют какие-либо плагины, однако для их работы требуется библиотека jQuery

Также во всех вариантах используется белая стрелка вверх на CSS (base64) и не используется HTML (он добавлен в JS)

JS добавляем в подвал страницы.

Вариант 1:

Обычная квадратная кнопка, которая появляется в правом нижнем углу страницы после начала прокрутки вниз

Вариант 2:

Вариант такой же как и первый, только с другой стрелкой и другим появлением.

Вариант 3:

Еще один вариант с появлением стрелки в правом нижнем углу

Вариант 4:

Вариант похожий на кнопку вверх в ВК.

Очень хороший и удобный вариант, если поле для кнопки не будет мешать вашему контенту (на примере он мешает).

Вариант 5:

Вариант аналогичен с четвертым, только кнопка выезжает снизу, не перекрывая тем самым контент

Смотрите также:

4 варианта создания неонового (мерцающего) текста на чистом CSS

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции

Плавная и плавающая фиксация элемента при прокрутке страницы

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Андрей:

    открыл в новом окне с работающей кнопкой, скопировал от туда прямо код через Ctrl+U
    в CSS строчки со стилем еще добавились
    в JS этот скрипт (аякс и все такое), поместил его в подвал страницы перед </body></html> и все заработало
    может не совсем правильно сделал но теперь работает
    так что отбой, спасибо за кнопку

    Ответить
  • Андрей:

    Здравствуйте, не получается поставить, вернее не хочет работать кнопка появляется с ошибкой

    то что CSS это понятно в CSS файл

    а вот JS в самом низу страницы но перед </body></html> окрашивается в белый цвет ошибки, можете уточнить где пределы подвала

    я на мобильную версию бургер меню ваше ставил там еще были эти строчки раньше
    <скрипт src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></скрипт >
    <скрипт >(function($){
    ТУТ КОД
    }
    })(jQuery);
    </скрипт >

    а теперь их нет, короче не работает, помогите советом

    Ответить
  • Константин:

    https://vsc-vrn.ru/ - получилось хорошо

    Ответить
  • who?:

    https://vibor-zaimov.ru - огонь, спасибо

    Ответить
  • Зинаида:

    Спасибо! Просто. Понятно. Работает.

    Ответить
  • Алексей:

    А как сделать чтоб кнопка работала на всех страницах сайта? На главной работает, на всех других нет.

    Ответить
  • Дмитрий:

    Спасибо все прекрасно работает!!!

    Ответить
  • Дмитрий:

    А какой код в html добавить?

    Ответить
  • Doston:

    а как теперь установит?

    Ответить
    • Doston:

      Всё сработал спасибо огромное

      Ответить
  • maximilian:

    СУПЕР - https://www.edelman.blog/2018/11/My-Philosophy.html

    Ответить