JS — кнопка вверх для сайта по всей высоте экрана

js knopka naverh - JS - кнопка вверх для сайта по всей высоте экрана

Все гениально и просто. Только CSS и JS. Правка исходного кода не нужна. Слегка переделанный скрипт под себя, который предложил Олег Александрович a.k.a. Sander

Картинка

Вполне можно обойтись и без графики, но внешний вид будет не очень, да и картинка занимает всего несколько байт. Скачать можно будет ниже. Загрузить на сайт и в CSS прописать правильный путь.

CSS стили

.gototop{
    display: none;
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 0;
    width: 10%;
    max-width: 100px;
    min-width: 10px;
    height: 100%;
    background: #333 url('../images/uarr2.png') no-repeat 50% 12px;
    opacity: 0.4;
    transition: background-color .2s ease-in;
    z-index: 99;
}
.gototop:hover{
    /*background: #333;*/
    opacity: 1;
}

JavaScript

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

// кнопка вверх
var gotop_scroll_start = 200;
function gotop_scroll(){
    if($(window).scrollTop()<gotop_scroll_start) $('.gototop').fadeOut(400);
    else $('.gototop').fadeIn(300);
}
$(function(){
    $('body').append('<div class="gototop" title="Наверх ↑"></div>');
    if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show();
    $(window).scroll(gotop_scroll);
    $(".gototop").click(function(){$('html,body').animate({scrollTop:0})});
})

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

  1. @devarts пишет:
    01.06.2017 в 20:06

    Цитата: Whitebob
    Как отобразить кнопку справа?

    в классе .gototop заменить left: 0, на right:0

  2. @Whitebob пишет:
    30.05.2017 в 08:28

    Как отобразить кнопку справа?

  3. @devarts пишет:
    28.07.2015 в 19:55

    Цитата: Аноним
    Убого, и на кой два раза путь до изображения прописывать.

    картинки разные и нужно либо менять фон, при котором нормально будет видно обе картинки, либо на hover грузить 2-ю картинку.

    и rgb не принципиально, а hex проще запомнить
    ———-

    переделал с использованием прозрачности, когда увидел полоску на маленьком экране и убрал картинку за ненадобностью wink

  4. @Аноним пишет:
    28.07.2015 в 13:18

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


    .gototop{
    display: none;
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 0;
    width: 3%;
    max-width: 60px;
    min-width: 10px;
    height: 100%;
    background: rgba(192,192,192,0.5) url('../images/uarr.png') no-repeat 50% 12px;
    transition: background-color .2s ease-in;
    z-index: 99;
    }
    .gototop:hover{
    background-color: rgba(129,129,129,0.6)!important
    }

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *