Кнопка «наверх» как Вконтакте + для планшетов.Это полный вариант кнопки «наверх» как вконтакте, кому нужно забираем и ставим — со всеми «наворотами и переворотами сия чудо кнопки». Под себя немного нужно будет естественно подстроить в стилях и т.д. — но результат я думаю обрадует так как действительно тут реализовано практически все в этом варианте данного скрипта.
Задача и реализация:
Наша кнопка должна появляться по левому краю окна браузера при прокрутке на определённое количество пикселей от верха страницы. Кликабельной должна быть вся левая сторона сайта. При нажатии на кнопку стрелка должна переворачиваться: теперь она смотрит вниз, и по повторному клику мы прокрутим страницу вниз: на то место, с которого только что поднялись. Плюс у нас будет ссылка для удаления кнопки: хорошим тоном является дать пользователю возможность убрать не нужные ему элементы интерфейса. Кроме того, кнопка должна масштабироваться соответственно размеру окна, на планшетах и айпадах кнопка также должна отображаться корректно, становясь при этом уже и ярче (ведь на тач-устройствах нет наведения мыши, кэп). Если же размер экрана ещё меньше, кнопку мы скрываем, чтобы она не наползала на контентную область сайта.
CSS
.modern-upbutton { /* основной стиль кнопки */
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100px;
margin-right: 50px;
box-sizing: border-box;
transition: background .5s;
cursor: pointer;
display: none;
}
.modern-upbutton>div { /* видимая область кнопки, узкая полоска */
transition: background .5s;
position: relative;
left: 0;
top: 0;
height: 100%;
width: 75px;
}
.modern-upbutton:hover>div {
background: #f2f2f2;
}
.modern-upbutton .subscripted-arrow { /* стрелка с надписью "наверх" */
padding-left: 4px;
color: #9a9ca0;
position: absolute;
width: 100%;
top: 12px;
left: 0;
text-align: center;
font-weight: bold;
font-size: 11px;
}
.modern-upbutton .modern-upbutton-disable { /* для выключения кнопки */
display: none;
color: rgb(189, 189, 189);
font-size: 10px;
position: absolute;
width: 100%;
bottom: 20px;
left: 0;
text-align: center;
transition: display .5s;
}
.modern-upbutton .modern-upbutton-disable span {
border-bottom: 1px dashed rgb(189, 189, 189);
}
.modern-upbutton:hover .modern-upbutton-disable {
display: block;
}
.modern-upbutton .modern-upbutton-disable span:hover {
color: #0079C2;
border-color: #0079C2;
}
.modern-upbutton[data-scroll=down] .subscripted-arrow span {
display: none;
}
.modern-upbutton[data-scroll=up] .subscripted-arrow { /* стрелка направлена вверх */
background: url(/img/modern-upbutton.png) 8px center no-repeat;
}
.modern-upbutton[data-scroll=down] .subscripted-arrow { /* стрелка направлена вниз */
background: url(/img/modern-downbutton.png) 8px center no-repeat;
height: 10px;
}
.modern-upbutton-was-disabled { /* юзер скрыл кнопку */
display: none !important;
}
.modern-upbutton.its-a-mobile-modern-upbutton>div { /* для планшетов */
width: 50px;
background: #f2f2f2;
z-index: 100;
}
.modern-upbutton.its-a-mobile-modern-upbutton>div:active {
background: rgb(219, 219, 219);
}
.modern-upbutton.its-a-mobile-modern-upbutton .subscripted-arrow {
height: 20px;
padding: 0;
}
.modern-upbutton.its-a-mobile-modern-upbutton .subscripted-arrow span {
display: none;
}
.modern-upbutton.its-a-mobile-modern-upbutton[data-scroll=down] .subscripted-arrow { /* планшет, стрелка вниз */
background: url(/img/modern-downbutton-mobile2.png) center center no-repeat;
height: 20px;
padding: 0;
}
.modern-upbutton.its-a-mobile-modern-upbutton[data-scroll=up] .subscripted-arrow { /* планшет, стрелка вверх */
background: url(/img/modern-upbutton-mobile2.png) center center no-repeat;
}
.modern-upbutton.its-a-mobile-modern-upbutton .modern-upbutton-disable {
display: block;
}HTML
наверх
убрать
javascript
//подстраиваем кнопку "наверх" под размер окна
function modern_upbutton_resize(){
var ourwidth_screen = $(window).width(); // взяли ширину окна
if(ourwidth_screen >= 1007) { // здесь и ниже число пикселей будет вашим, так как зависит от ширины сайта
$('.modern-upbutton').css('width',(ourwidth_screen-860)/2); // окно большое, подогнали под размер
smallscreen = false;
} else if (ourwidth_screen >= 955) {
$('.modern-upbutton').addClass('its-a-mobile-modern-upbutton'); // маленькое окно или планшет
smallscreen = false;
} else {
smallscreen = true; // окно настолько мало, что места для кнопки просто нет, прячем её
$('.modern-upbutton').hide();
}
}
//при изменении юзером размеров окна подстраиваем кнопку под новый масштаб
$(window).resize(function(){
modern_upbutton_resize();
});
//обработка клика по кнопке наверх - прокрутка вверх
function modern_upbutton_click_scrollup() {
$('.modern-upbutton').attr('data-pos',$(window).scrollTop()); // запоминаем место, от которого проматываем наверх
$("body,html").animate({scrollTop: 0}, 500); // прокрутка к началу
setTimeout(function(){
$('.modern-upbutton').attr('data-scroll', 'down'); // меняем значение флажка "направление стрелки", теперь по следующему клику прокрутка пойдёт вниз
}, 501);
return false;
}
//обработка клика по кнопке наверх - прокрутка вниз
function modern_upbutton_click_scrolldown() {
pos_to_scroll = $('.modern-upbutton').attr('data-pos'); // читаем позицию, до которой проматываем
$('.modern-upbutton').attr('data-pos',0); // обнуляем её
$("body,html").animate({scrollTop: pos_to_scroll}, 500); // скроллим вниз
setTimeout(function(){
$('.modern-upbutton').attr('data-scroll', 'up'); // меняем направление стрелочки на "вверх"
}, 501);
return false;
}
//управление показом и скрытием стрелки
$(window).scroll(function() {
if(smallscreen == false && window.modern_upbutton_was_killed != true) {
if($(window).scrollTop() >= 300) { // если прокрутили уже 300 пикселей...
$('.modern-upbutton').attr('data-scroll', 'up');
$('.modern-upbutton').fadeIn(300); // показываем кнопку
} else if ($('.modern-upbutton').attr('data-pos') == "0") { // если верх страницы...
if ($('.modern-upbutton').attr('data-scroll') == 'up') {
$('.modern-upbutton').fadeOut(300); // скрываем её
}
}
}
});
//функция удаления кнопки пользователем
function modern_upbutton_disable(){
var date = new Date(new Date().getTime() + 60*1000*60*24); // берём сутки от текущего времени и даты
document.cookie="modern_upbutton_disable_by_user=1; path=/; expires="+date.toUTCString(); // устанавливаем куку на сутки. По истечении этого времени кнопка появится снова.
$('.modern-upbutton').addClass('modern-upbutton-was-disabled'); // ставим класс "выключено"
}
//функция проверки куки по её имени
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([.$?*|{}()[]/+^])/g, '$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
//проверяем, не удалял ли юзер кнопку
function modern_upbutton_check_for_disable(){
var cookcheck = getCookie('modern_upbutton_disable_by_user'); // ищем куку
if (cookcheck != undefined) { // если нашли...
$('.modern-upbutton').addClass('modern-upbutton-was-disabled'); // убиваем её
window.modern_upbutton_was_killed = true;
}
}
$(document).ready(function(){ // при загрузке документа...
//проверяем, не удалена ли кнопка
modern_upbutton_check_for_disable();
//подгоняем её под окно
modern_upbutton_resize();
//вешаем следилку на событие "клик по кнопке"
$('.modern-upbutton').bind("click touch ontouchstart", function(e){
if ($(event.target).closest(".modern-upbutton-disable").length) return;
if ($(this).attr('data-scroll') == 'up') {
modern_upbutton_click_scrollup(); // крутим вверх
} else {
modern_upbutton_click_scrolldown(); // крутим вниз
}
event.stopPropagation();
});
//вешаем следилку на событие "клик по кнопке Удалить"
$('.modern-upbutton-disable').click(function(){
modern_upbutton_disable(); // убиваем кнопку
});
});