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

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()<gotop_scroll_start) $('.gototop').fadeOut(400);
    else $('.gototop').fadeIn(300);
}
$(function(){
    $('body').append('<div class="gototop" title="Наверх &uarr;"></div>');
    if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show();
    $(window).scroll(gotop_scroll);
    $(".gototop").click(function(){$('html,body').animate({scrollTop:0})});
})


Для работы необходимо наличие библиотеки jQuery

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


Понравилась статья "JS - кнопка вверх для сайта по всей высоте экрана" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 4 •  Просмотров: 1930   Дата: 22-июл-2015, 06:57

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

Комментарии


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


.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) • цитировать • •

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



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

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

переделал с использованием прозрачности, когда увидел полоску на маленьком экране и убрал картинку за ненадобностью wink
(28 июля 2015 19:55) • цитировать • •
#3 Whitebob   

Гости
Как отобразить кнопку справа?
(30 мая 2017 08:28) • цитировать • •

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


в классе .gototop заменить left: 0, на right:0
(1 июня 2017 20:06) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика