jQuery кнопка «Наверх»

Маленькая фича с использованием jQuery — кнопка «Наверх». Когда мы или еще наверху окна браузера или вернулись наверх, кнопка не раздражает неуместностью. Как только мы открутили сколько-то пикселей вниз, кнопка появляется в заданной нами точке окна браузера, предлагая ненавязчивый сервис.

В качестве интерактивного элемента я использовал ссылку, тогда кнопка (с соответсвующим якорем) продолжает работать с отключенным JavaScript.

К делу:

После открывающего тега <body> помещаем якорь:

<div id="top"></div>

Перед закрывающим </body> добавляем


<div><a id="toTop" href="(my_generated_url)#top" title="Наверх"><span style="display: none;">Наверх</span></a></div>

Не забудьте, что для случая, когда JavaScript отключен, url должен быть сгенерирован системой, иначе с любой страницы, которая не является «физическим» файлом HTML на диске, вы попадете в корневой url сайта (http://mysite#top).

В основе стилевого оформления опции фиксированное позиционирование элемента, в остальном полная свобода творчества


#toTop {
	position: fixed;
	right: value;
	bottom: value;
	width: value;
	height: value;
	background: color url(my_image-idle) no-repeat X Y;
}
a#toTop:hover, #toTop.toTop-click {background: url(my_image-hover) no-repeat X Y;}
a#toTop:active {background: url(my_image-active) no-repeat X Y;}

Изначальня невидимость элемента обеспечивается эффектом jQuery .hide()


<script type="text/javascript">
// script by Lloyd http://agyuku.net/2009/05/back-to-top-link-using-jquery/
// changed on 2011-03-12 by jen http://jenweb.info/page/go-to-top-jquery
$(function() {
	$('#toTop').hide();
	$(window).scroll(function() {
		if($(this).scrollTop() >= 160) { // could and should! be changed
			$('#toTop').fadeIn();
			$('#toTop').click(function() {
				$(this).addClass('toTop-click');
			});
		} else {
			if($(window).scrollTop() == 0) {
				$('#toTop').removeClass('toTop-click');
			}
			$('#toTop').fadeOut();
		}
	});
	// Opera fix: DynamicDrive script ::jQuery Scroll to Top Control v1.1
	// http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
	var mode = (window.opera) ? ((document.compatMode == "CSS1Compat") ? $('html') : $('body')) : $('html,body');
	$('#toTop').click(function() {
		mode.animate({scrollTop:0},800);
		return false;
	});
});
</script>

Скрипт добавляется в секцию <head> после подключения jQuery. В MaxSite после:

<?= mso_load_jquery() ?>

Если используется какое-либо расширение jQuery типа jQuery UI, желающие могут переписать скрипт под эту библиотеку.

Скрипт тестировался:

– Windows XP, Windows 7:

  • IE 6 (position: fixed не поддерживается)
  • IE 7, 8, 9
  • Opera 11
  • Safari 5 (Win 7), Safari 4 (XP)
  • Google Chrome 11 (Win 7), Google Chrome 9, 10 (XP)
  • Firefox 3.6 (Win 7, XP), 4 (Win 7), Firefox 2.20 (!!! XP)

– Ubuntu 10.04:

  • Firefox 3.6, Firefox 4 (Upd Apr 2011)
  • Chromium 10+, Google Chrome 10+
  • Opera 11

В сети есть несколько решений, среди них «коробочное» от DynamicDrive, чьи стабильные и отлаженные скрипты я нередко использую, но в данном случае даже несмотря на нечеткую работу в Опере больше всего мне понравилось вот это:
http://agyuku.net/2009/05/back-to-top-link-using-jquery/
Можете выбирать. А можете найти в сети еще какое-нибудь.
Плагин для MaxSite на основе этого скрипта.

Loading comments …   ←   jQuery кнопка «Наверх»

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*