Рубрики
Мысли Программирование

Быстрый переход наверх страницы, как вконтакте

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

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

Ссылка на демо (откроется в новом окне)

Не представляю, как я жил без этой кнопки раньше, если её нет на сайте, а прокрутка большая, то меня ломает:)

Вот как это выглядит (для тех, кто ещё не видел демо):

Нажатием на серую область слева, браузер «отскролит» нас наверх.

Инструменты: html, javascript, jquery.

Алгоритм:
1. Берем нужный шаблон джумлы, вордпресса или страницу сайта
2. Добавляем на страницу область-кнопку

Здесь надо оговориться, что показывается размещение кнопки только для вёрстки, где есть свободное место слева, не менее 30 пикселей, чтобы пользователь мог по нему попасть. Это остаётся на ваше усмотрение.

Я добавил div перед закрывающим тегом элемента wrap (на моей странице wrap имеет фиксированную ширину и выровнен посередине).

<div id="up-button" >
	<div>Наверх<div>
<div>

И стили для области перехода (пояснения в комментариях):

<style type="text/css">
/*Left fast top scroll*/
#up-button
{
/*
позиция элемента - фиксированная на странице, в левом верхнем углу;
так же задаём 100% высоту и получаем область на всю 
левую часть экрана шириной 100px
*/
position: fixed; 
top: 0; 
left: 0; 
width:100px; 
height:100%; 
background: #D1D1D1; 
display: none;/*скрываем область по умолчанию*/
}

#up-button div
{
/*элемент с подписью названия области*/
font-weight: bold;
font-size: 14px;
width:50px;
margin: 5px auto;
color: #636363;
}
</style>

3. Добавляем на страницу javascript для своевременного отображения области и реакции на клик

<script type="text/javascript">
//высота в пикселях, при прокрутке на которую, появится область для быстрого возврата слева
var scrollButtonLimit = 300;

//фукнция для инициализации решения
function InitScrollNavigation() {
	//применён jQuery
	//получаем область быстрого возврата наверх (div) в переменную
	var upButton = $("#up-button");

	//навешиваем реакцию на каждое событие скрола от пользователя
	$(window).scroll(function (e) {
		var scrollTop = $(window).scrollTop();//получаем значение прокрутки
		if (scrollTop > scrollButtonLimit) {//значение больше заданной константы - показываем кнопку
		  $(upButton).show();
		  return;
		}
		if (scrollTop <= scrollButtonLimit) {//значение меньше заданной константы - скрываем кнопку
		  $(upButton).hide();
		  return;
		}
	});
	
	//навершиваем реакцию на событие при клике на область, скролим пользователя наверх 
	$(upButton).click(function (e) {
		$(window).scrollTop(0);
	});
}

$(document).ready(function() {
	//навешиваем обработчики при загрузке страницы
	InitScrollNavigation();	
});
</script>

Вот наша область быстрого перехода и готова!
Прокручиваем вниз, появляется кнопка слева, щёлкаем, переходим наверх.

Возможно, кому-то достаточно и этого для покрытия задач.

Но мы всё равно переходим к созданию меню:)

4. Помечаем нужные «якори» — теги <a name=»your-anchor-name»>your-element-name</a>, на которые мы хотим переходить на странице.

Ключевым для нас является атрибут name, о нём ещё будет сказано дальше (он может реализовать стандартный механизм переходов html).

Например, такая вёрстка:

<p><strong><a name="brod-artisti">Бродячие артисты</a></strong></p>
<p style="color: #4E76C2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ac arcu sollicitudin lacinia ac ac risus.
</p>
<p><strong><a name="veselo-tancuut">Весело танцуют</a></strong></p>
<p style="color: #C2544E;">
Aliquam tempor enim aliquet nisl ultrices pellentesque. Maecenas ultrices nulla et eros euismod pellentesque. Nam mattis mattis mi sit amet semper. Nam aliquam leo lacus. ...
</p>

4. Добавляем меню

<ul id="video-menu" >
	<li><a onclick="return ScrollToTarget(this);" href="#brod-artisti">Бродячие артисты</a></li>
	<li><a onclick="return ScrollToTarget(this);" href="#veselo-tancuut">Весело танцуют</a></li>
</ul>

Функцией ScrollToTarget по окончании действий возвращается значение false, что не даёт браузеру перейти по ссылке.

5. Добавляем реакцию по клику на пункт меню для перехода на конент

<script type="text/javascript">
//функция, которая будет вызываться при клике на ссылку в меню
function ScrollToTarget(element) {
	//получем ссылку, выбираем из неё всё, что после # - название элемента a, куда мы хотим перейти
	var elHref = $(element).attr('href');		
	var name = elHref.substring(elHref.lastIndexOf('#') + 1, elHref.length);

	//получаем позицию скрола элемента, на который должен быть осуществлён переход
	var targetTop = $("#video-content").find("a[name='" + name + "']").offset().top;

	//скролим пользователя на элемент (чуть выше элемента - для эргономики)
	$(window).scrollTop(targetTop - 5);
	
	return false;
}
</script>

Меню готово! Щёлкаем на одном из пунктов — переходим на него на странице.

Возвращаясь к тегу <a/> с атрибутом name, этот атрибут позволяем делать ссылки внутри страницы (якори) на нужные элементы. Если убрать из тега меню <a onclick=»return ScrollToTarget(this);» href=»#brod-artisti»>Текст ссылки</a> функцию на onclick, отработает стандартный механизм, который модифицирует ссылку (что нам не нужно); но механизм перехода наверх всё равно будет работать.

Спасибо за внимание!
Удачи и до новых встреч на просторах сети!

P.S. Надо добавить описанный скрол в блог:)