Умная прокрутка страницы вверх-вниз как на Хабре

Кнопка "Вверх" уже стала неотъемлемой частью практически любого веб-ресурса. И если раньше еще возникали дискуссии на тему стоит ли размещать такое дополнение на сайте или нет, то теперь различные модификации этих кнопок применяются практически повсеместно.
  Одной из наиболее удачных, в этом плане, разработок является кнопка вверх как ВКонтакте, которая прокручивает страницу вверх, а при необходимости обратно к месту остановки на странице. Такое решение весьма подходит для сайтов, страницы которых содержат объемные тексты со множеством комментариев. Аналоги ее присутствуют уже на многих ресурсах, но мне лично приглянулся вариант размещенный на Хабре. Собственно именно такую кнопочку я попробовал воссоздать, используя jQuery для реализации функционала.

  Принцип работы очень простой - изначально кнопки не видны, при прокрутке страницы вниз, до определенного момента, (в моем варианте на высоту экрана), появляется кнопка "Вверх", после клика по ней, страница плавно прокручивается к указанной точке ("0" или больше) и вместо "Вверх" появляется кнопка "Обратно" ("К остановке", "Назад" и т.п.) и по клику на неё страница прокручивается к тому месту откуда "ушли наверх".
ПРИМЕР
  Голову я ломал не долго, посмотрев пару различных вариантов реализации на чистом JS, решил сделать все немного проще.
  HTML выглядит так:

<div id='fixed'>
 <div id="up" class='updown' title='Вверх'></div>
 <div id="down" class='updown' title='Обратно'></div>
</div>

Не имеет значения где расположен блок кнопок, он имеет фиксированное позиционирование, кроме того, не обязательно делать дополнительную обертку, в данном случаи блок #fixed, достаточно просто для удобства расположить оба блока кнопок рядом, например если это меню сайта.

  Теперь CSS:

#fixed {
 position: fixed;
 top: 0;
 left: 0;
 z-index:9999;
 width: 64px;
 height: 100%;
 background: #DCDCDC;
}
.updown {
  display: none;
  min-height: 32px;
  height: 300px;
  width: 100%;
  cursor: pointer;
  margin: 100% auto;
}
.updown::before {
  display: block;
  content: '';
  height: 50%;
  width: 100%;
}
/*изображение кнопки добавлено к псевдоэлементам чтобы было удобно использовать спрайт и управлять расположением кнопки*/
#down::after,
#up::after {
  display: block;
  content: '';
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABAAgMAAAAG4J09AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAAlQTFRFAAAADAwMExMTgLZmZwAAAAF0Uk5TAEDm2GYAAACOSURBVCjPrZGxDYAgEEXBxMb+hnALR7C4T8EEjuES9DbsKQd4aEyMMV7DL97lwvvGPE4/10BcA1BeC0wFAQpEAFekQFbClJHoM0QuuCAQPHGEIAvxmCCLjXiQ4FbiLqQ1L0fj9frvQT/4be5+fg5ZQjBNSxN1qFOZSW/0WW8v5udzBVpKq0mL0yq13Pd+dgnuMoxBtP7QAAAAAElFTkSuQmCC");
  background-color: transparent;
  background-repeat: no-repeat;
  border-radius: 32px;
  box-shadow: inset 50px 50px rgba(255,255,255,0.5);
  height: 32px;
  width: 32px;
  margin: 0 auto;
}
#up::after {
  background-position: 0px 0px;
}
#down::after {
  background-position: 0px -32px;
}
#down:hover::after,
#up:hover::after {
  box-shadow: inset 50px 50px rgba(0,0,0,0.2);
}

  И остается только добавить jQuery-скрипт:

var pageYLabel = 0; //переменная будет хранить координаты прокрутки

 $(window)
 .load(function() {
  var pageY = $(window).scrollTop();
 if (pageY > 200) {
  $("#up").show();
 } //при загрузке страницы если прокрутка больше 200px - показывать кнопку вверх
 })
 .scroll(function(e){
  var pageY = $(window).scrollTop();
  var innerHeight = $(window).innerHeight();
  var docHeight = $(document).height();
 if (pageY > innerHeight) {
         $("#up").show();
 }else{$("#up").hide();}

 if (pageY < innerHeight && pageYLabel >= innerHeight) {
         $("#down").show();
 }else{$("#down").hide();}
 }); //действия при прокрутке страницы

 $('#up').click(
 function() {
  var pageY = $(window).scrollTop();
  pageYLabel = pageY; //запоминаем где был совершен клик
  $("html,body").animate({scrollTop:0},"slow");
 });
 $('#down').click(
 function(){
  $("html,body").animate({scrollTop:pageYLabel},"slow"); //при возврате прокручиваем страницу к месту клика по кнопке
 });

  Вот как-то так. Соображения, рекомендации, обсуждения как всегда принимаются в комментариях.
Всем успехов.

©http://magentawave.com