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

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

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

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

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

Вот как это выглядит (для тех, кто ещё не видел демо):
Быстрый переход наверх страницы
Нажатием на серую область слева, браузер «отскролит» нас наверх.

Инструменты: 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. Надо добавить описанный скрол в блог:)

Запись опубликована в рубрике Веб-дизайн. Добавьте в закладки постоянную ссылку.

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

  1. Александр говорит:

    Доброго времени суток. Подскажите, пожалуйста, а как вставить эти коды в шаблон страницы вордпресс? Я новичок и еще не все могу.. Попробовал но положительного результата не получил.
    Вот мой шаблон страницы . Заранее благодарен за ответ.

    <article id="post-» >

    » . __( ‘Pages:’, ‘twentythirteen’ ) . », ‘after’ => », ‘link_before’ => », ‘link_after’ => » ) ); ?>

    <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '’, » ); ?>


    • Для вордпресс алгоритм такой:
      1) добавить в header.php шаблона css-стили и скрипт, в тег ;
      стили лучше добавить в уже существующий файл, как и скрипт. Придётся добавить ссылку на jquery, если её ещё нет.
      2) в footer.php добавить саму кнопку

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>