Все гениально и просто. Только 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})});
})
Убого, и на кой два раза путь до изображения прописывать.
.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
}
картинки разные и нужно либо менять фон, при котором нормально будет видно обе картинки, либо на hover грузить 2-ю картинку.
и rgb не принципиально, а hex проще запомнить
———-
переделал с использованием прозрачности, когда увидел полоску на маленьком экране и убрал картинку за ненадобностью
Как отобразить кнопку справа?
в классе .gototop заменить left: 0, на right:0