Кнопка наверх и вниз для сайта как в ВКонтакте

Введение

Я раньше уже писал статью — Кнопка «наверх» для сайта как в ВКонтакте. Но прошло время и ВКонтакте кнопка обновилась, и добавился новый функционал, теперь появилась возможность кроме скроллинга вверх, еще и возвращаться назад к контенту. Нужно идти в ногу со всеми, и не отставать в развитии, поэтому я решил расширить свой старый код.

Для нетерпеливых я сделал пример, посмотреть его можно по этой ссылке.

Кнопка наверх и вниз для сайта как в ВКонтакте. Код

Теперь перейдем непосредственно к самому коду, тут ни чего сложного. Чтобы было понятней я подробно прокомментировал почти каждую строку.
Сначала css:

<style>
.in_top{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
    display: none;
}
.in_top:hover{
    background-color: #E1E7ED;
    opacity: 1;
    filter: alpha(opacity=100);
}
.in_top span{
    display: block;
    width: 100px;
    margin-top: 10px;
    text-align: center;
    color: #45688E;
    font-weight: bold;
}
</style>

Теперь напишем js код, для работы кнопки:

// объявим переменные
var bottom_position = 0; // положение страницы
var flag_bottom = false; // флаг, для отображения кнопки "назад"
var flag_animate = false;// Флаг, определяющий, выполнение анимации

$(document).ready(function(){
	// клик по кнопке вверх/назад
	$('.in_top').click(function(){
		// поднимаем флаг, началась выполнениние анимации
		flag_animate = true;
		// если на данный момент кнопка "назад"
		if(flag_bottom){
			// то скролим страницу в нужное место
			$("body,html").animate({"scrollTop":bottom_position}, 300, function(){ 
				// опускаем влаг анимации, она закончилась
				flag_animate = false;
			});
			// меняем кнопку
			flag_bottom = false;
			$('.in_top span').html('↑ Наверх ↑');
		}else{
			// если кнопка "вверх"
			$("body,html").animate({"scrollTop":0}, 300, function(){ 
				flag_animate = false;
			});		
			// запомним на сколько была прокручена страница
			bottom_position = $(window).scrollTop();
			// и зададим флаг, что нужно показать кнопку "назад"
			flag_bottom = true;
			$('.in_top span').html('↓ Назад ');
		}
	});
 
	// делаем проверку при скролле
	$(window).scroll(function(event){
		var countScroll = $(window).scrollTop();
		// если прокрутили больше 100 пикселей и анимация не выполняется, то показываем кнопку
		if (countScroll > 100 && !flag_animate){
			$('.in_top').show();
			if(flag_bottom){
				flag_bottom = false;
				$('.in_top span').html('↑ Наверх ↑');
			}
		// иначе прячем кнопку, если это не кнопка "назад"
		}else{
			if(!flag_bottom){
				$('.in_top').hide();
			}
		}
	});
});

И все, что осталось — это кусочек html, непосредственно кнопка:

<div class="in_top">
	<span>↑ Наверх ↑</span>
</div>

Вот и все. Напоследок приложу ссылку на исходник — вот он.