Кнопка «Наверх», покруче, чем в вконтакте

jQuery, ВКонтакте  /  222 комментария

На сайте вконтакте в левом верхнем углу есть вот такая кнопка:

кнопка наверх вконтакте

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

Попробуем сделать что-нибудь подобное, но с некоторыми доработками. Копировать оттуда код я не собираюсь, напишу что-нибудь своё.

Обратите внимание, что пост опубликован в 2011-м году, с того времени кнопка вконтакте претерпела некоторые изменения, например:

  • появилась и исчезла возможность перехода на предыдущую страницу при прокрутке наверх,
  • в данным момент (2013 год) после прокрутки наверх, кнопка позволяет вернуться в то место на странице, откуда была совершена прокрутка;

Эти два варианта кнопки я подробно описал в следующем посту.

HTML кнопки

Сам HTML довольно прост и состоит из всего пары строк:

<div id="top-link">
	<a href="#top">наверх</a>
</div>

Вставляем этот код перед закрывающим тегом </body>. Если хотите, вы можете изменить ID блока и анкор ссылки, но при этом не забудьте их поменять также и в остальном коде.

Подключение CSS и JavaScript файлов

Для того, чтобы кнопка нормально функционировала, нам понадобятся:

  • немного стилей CSS,
  • библиотека jQuery,
  • и немного кода JavaScript;

Всё это мы подробно рассмотрим дальше в статье, а пока что разберемся, как правильно подключать их на сайт.

Проблем с CSS думаю возникнуть не должно — вы просто находите файл, в котором содержатся все основные стили сайта и вставляете туда код, который будет представлен в листингах ниже.

Что касается JavaScript, то я предлагаю рассмотреть два способа подключения — для WordPress и не для WordPress. начнем со второго.

Способ 1. Не для WordPress

Итак, здесь мы подключаем jQuery и какой-то js-файл, пока что пустой. Этот код вы можете поместить перед HTML, который мы вставляли в первом шаге.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button.js"></script>

Так, внимание, у многих были проблемы с подключением файла button.js — используйте абсолютный URL файла.

Способ 2. Для WordPress

Здесь всё обстоит иначе. Для подключения мы будем использовать функцию wp_enqueue_script(). Код ниже нужно вставлять в functions.php текущей темы:

function true_top_button_enqueue() {
	wp_enqueue_script( 'jquery' );
 	wp_enqueue_script( 'topbutton', get_stylesheet_directory_uri() . '/button.js', array('jquery'), null, true );
}
 
add_action( 'wp_enqueue_scripts', 'true_top_button_enqueue' );

Если вы будете использовать код из этого примера один в один, то файл button.js нужно будет засунуть непосредственно в папку с текущей темой. Для получения URL текущей темы в примере используется функция get_stylesheet_directory_uri().

Стили CSS

Эти стили необходимы лишь для того, чтобы кнопка нормально функционировала, разумеется, ещё нужно её как-то оформить, для этого вам понадобится добавить также немного собственных css-стилей.

#top-link{
	cursor:pointer; /* изменяем указатель мыши при наведении на блок */
	display:none; /* скрываем блок с кнопкой, т.к. отображать надо только при прокрутке */
	position:fixed; /* фиксируем расположение */
	left:0px;
	top:0px;
	padding:0;
}
#top-link a{
	display:block; 
}

jQuery. Содержимое файла button.js

Сначала уясним несколько моментов:

  • кнопка должна приспосабливаться под разные разрешения экрана,
  • кнопка должна автоматически изменять свою ширину, если мы будем сужать или расширять окно браузера,
  • поддержка мобильных устройств;

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

jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		var totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		var totalTopLinkWidth = jQuery(this).children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
			return false;
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
			return true;
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1 && topLink.toplinkwidth()) {
			topLink.fadeIn(300);
		} else {
			topLink.fadeOut(300);
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

Если что-то не будет получаться, оставьте свой вопрос в комментариях — я вам помогу.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 222

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал