Кнопка «наверх» как вконтакте. jQuery/CSS

Итак, мои маленькие сетевые друзья, сегодня мы делаем кнопку для прокрутки страницы наверх, ориентируясь на юзабилити аналогичной кнопки В Контакте.

Наша кнопка должна появляться по левому краю окна браузера при прокрутке на определённое количество пикселей от верха страницы. Кликабельной должна быть вся левая сторона сайта. При нажатии на кнопку стрелка должна переворачиваться: теперь она смотрит вниз, и по повторному клику мы прокрутим страницу вниз: на то место, с которого только что поднялись. Плюс у нас будет ссылка для удаления кнопки: хорошим тоном является дать пользователю возможность убрать не нужные ему элементы интерфейса. Кроме того, кнопка должна масштабироваться соответственно размеру окна, на планшетах и айпадах кнопка также должна отображаться корректно, становясь при этом уже и ярче (ведь на тач-устройствах нет наведения мыши, кэп). Если же размер экрана ещё меньше, кнопку мы скрываем, чтобы она не наползала на контентную область сайта.

Как видите, задача интересная.

Что у нас получилось, вы можете увидеть на скриншотах:

Screen1

Screen2

Screen7

 

На планшетах:

 

Screen3

Screen4

Screen6

Делать будем на jQuery. Ниже код с комментариями, надеюсь, вы немного шарите, это поможет. Я лично хер знает что творю. -)

Во-первых, CSS, для лучшего понимания:

Теперь HTML разметка кнопки:

И, наконец, JS:

 
Вот, собственно, и всё. После оптимизации JS и переименования конских селекторов CSS получится неплохая игрушка.

Теги поста:

2 комментария “Кнопка «наверх» как вконтакте. jQuery/CSS”

  1. Григорий 05.12.2013 at 12:16 #

    Слишком запутано получилось, но в целом довольно эффективно и удобно :)

    • chainsaw 23.12.2013 at 15:41 #

      Да, не фонтан, но всякий должен пройти этап изобретения велосипедов.

Выскажись?

Добавить картинку
Protected by WP Anti Spam