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})});
})

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

0 комментариев на «“JS – кнопка вверх для сайта по всей высоте экрана”»

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


    .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
    }

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

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

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

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

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

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

Добавить комментарий для devartsОтменить ответ