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

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

1. Картинку, которую можно скачать в виде архива по ссылке внизу статьи закинуть себе на сайт и прописать правильный путь в коде ниже.

2. В файл стилей добавляем 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;
}

3. Создаем новый или добавляем в какой нибудь существующий js файл следующий код

// кнопка вверх
var gotop_scroll_start = 200;
function gotop_scroll(){
    if($(window).scrollTop()

'); if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show(); $(window).scroll(gotop_scroll); $(".gototop").click(function(){$('html,body').animate({scrollTop:0})}); })

Не силен в javascript, да и лень проверять, но возможно понадобится подключить jquery библиотеку. В DLE она уже встроена, поэтому мне было достаточно добавить код.

Скачать uarr.rar Размер: 1,46 Kb Скачиваний: 27

« DLE - как скрыть или убрать те...

Opera Max - экономит траффик и... »

Понравилась статья "JS - кнопка вверх для сайта по всей высоте экрана" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте

Комментариев: 2 • Просмотров: 1085 Дата: 22-июл-2015, 06:57 Автор: artemmian

Комментарии

Гости

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

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

(28 июля 2015 13:18) • цитировать • •

#2 artemmian

admin

Цитата: Аноним

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

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

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

(28 июля 2015 19:55) • цитировать • •

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

Похожие статьи

Комментарии