Skip to content

Панель "Вверх-вниз"

Привет, друзья! В этом уроке я вам покажу, как добавить на свой сайт совместную панель из кнопок «вверх» и «вниз». Ранее, в одном из уроков мы рассматривали тонкости в создании кнопок «вверх» и «вниз». Теперь мы объединим эти две кнопки во единую панель так, что можно будет подняться наверх, а потом вернуться обратно, к тому месту, где был произведен клик по кнопке вверх.

Такого вида панель используется на многих популярных сайтах, как Вконтакте и Хабрахабр. Я вдохновлялся реализацией с Хабрахабра.

CSS

Для нашей панели «вверх-вниз» требуются следующие стили, которые вы сможете потом переделать под дизайн своего сайта:

/* To top panel */
.to_top {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 120;
width: 40px;
display: none;
}

.to_top .to_top_panel {
display: block;
width: 100%;
height: 100%;
font-size: 11px;
color: #555;
padding: 10px 10px 0;
position: relative;
background: #ddd;
border-right: 1px solid #ccc;
}
.to_top:hover .to_top_panel {
cursor: pointer;
background: #e5e5e5;
}
.to_top .to_top_button {
text-align: center;
}
.to_top .to_top_button .arrow {
font-size: 14px;
font-weight: bold;
font-family: tahoma;
vertical-align: middle;
}
.to_top .to_top_button .label {
display: block;
}

JavaScript

Работать наша панель будет на jQuery и плагине jQuery ScrollTo. Эти два скрипта должны быть подключены к вашей странице. HTML-код и функционал панели описывает следующий JavaScript-код, который вы должны добавить в свой файл скриптов или создать новый под него:

/* Top-Bottom Panel Script */
jQuery(function($) {

$(function() {

	window.last_scroll_position = 0;
	var show = false;
	var to_top_button = $('<div class="to_top"><div class="to_top_panel"><div class="to_top_button" title="Up"><span class="arrow">↑</span> <span class="label">Up</span></div></div></div>');

	$('body').append(to_top_button);

	$('.to_top_panel', to_top_button).click(function(){
		if(to_top_button.hasClass('has_position')){
			to_top_button.removeClass('has_position');
			$('.to_top_button .arrow', to_top_button).html('↑');
			$('.to_top_button .label', to_top_button).html('Up');
			$.scrollTo( window.last_scroll_position , 100,  { axis: 'y' } );
			window.last_scroll_position = 0;
		}else{
			to_top_button.addClass('has_position');
			$('.to_top_button .arrow', to_top_button).html('↓');
			$('.to_top_button .label', to_top_button).html('Down');
			window.last_scroll_position = window.pageYOffset;
			$.scrollTo( $('body') , 100,  { axis: 'y' } );
		}
	})

	var last_position = 0;

	$(window).scroll(function () {   
		show_or_hide()
		if( last_position < window.pageYOffset){
			if( to_top_button.hasClass('has_position') ){ show = false }
		}else{}
		last_position = window.pageYOffset;
	})

	function show_or_hide(){
		if( window.pageYOffset > 400){
			if(!show){
				to_top_button.show()
				to_top_button.removeClass('has_position');
				$('.to_top_button .arrow', to_top_button).html('↑');
				$('.to_top_button .label', to_top_button).html('Up');
				show = true
			}
		}else{
			if(show && !to_top_button.hasClass('has_position')){
				to_top_button.hide()
				show = false
			}
		}
	}

	show_or_hide()

});

});