Как это сделано на Дафтере #1: Панель "наверх" слева

















Добрый день, уважаемые пользователи Дафтера. Этот топик начнет серию небольших туториалов и описание изменений, которые мы постепенно проводим на Дафтере. Все планы будущих обновлений раскрывать не будем, все узнаете по порядку. Хотя очень маленькие изменения уже были (полностью переработана шапка, эффекты плавности, новые шрифты), будем рассматривать побольше.

Codepen - удобная среда для ваших экспериментов

Интересное: в качестве cms используется LiveStreet у нас. Для нее есть плагины, но мы стараемся не использовать их. Какого же было удивление, когда даже для кнопки вверх был найден плагин! Интересно, это действительно так трудно?..





Итак, наверное кто-то заметил, что сегодня появилась кнопка/панель «наверх». Цвета в ней использованы как и на всем сайте, только под эффектом opacity. Данный эффект делает блок прозрачным по шкале от 0.0 до 0.9, а 100 — прозрачности нет. Для плавного отображения псевдокласса :hover мы использовали универсальное свойство transition. Кстати, чтобы быть уверенным, что данное свойство будет работать на всех браузерах (IE не учитываем), то лучше добавлять префикс движка браузера. Кто не знает, opera, chrome и firefox по-порядку:

-o-

-webkit-
-moz-





Картинка оригинальностью не отличается, поэтому о ней говорить особо нечего. А теперь самое главное:

Как же подняться вверх, да еще и плавно
Тут мы использовали JQuery/JS (результаты аналогичны). Код можно увидеть ниже:

$(function(){

$(window).scroll(function(){
var scrolled = $(window).scrollTop();
if (scrolled > 200) $('.go-top').fadeIn('slow');
if (scrolled < 200) $('.go-top').fadeOut('slow');
});

$('.go-top').click(function () {
$("html, body").animate({ scrollTop: "0" },200);
});
});


Сначала определяем насколько прокручена страница и если больше заданного значения, то показываем панель. Дальше — дело техники, то есть просто прокручиваем страницу вверх при нажатию на кнопку.



Как видите, ничего необычного нет, но и сделать что-то необычное мы не ставили задачу. Скоро будет происходить колдовство над шапкой. Да, с модными технологиями и плюшками. Принимаем советы и предложения, а пока прощаемся с вами. До новых встреч!



UPD: Добавили возвращение назад как ВКонтакте. Просто добавили вот этот код:

topLink.click(function(e) {

if($(this).hasClass('go-bottomimage')){
// при нажатии на кнопку переходим обратно
$("body").scrollTo( pos + 'px', 500 );
} else{
// определяем и запоминаем координаты места страницы
pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
$("body,html").animate({scrollTop: 0},500);
}
return false;


Если кому-то нужен полный код с объяснениями, то пусть пишет в комментариях или сам смотрит исходники.