Кнопки «Наверх ⁄ Вниз» – плагин для MaxSite

Логическое развитие плагина Кнопка «Наверх»

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

Сама по себе прокрутка вверх-вниз, полностью рабочий скрипт:


$(function() {
	var mode = (window.opera) ? ((document.compatMode == "CSS1Compat") ? $('html') : $('body')) : $('html,body');
		
	$('#toTop').click(function() {
		mode.animate(scrollTop:0); // Наверх
		return false;
	});
	$('#toBottom').click(function() {
		mode.animate(scrollTop:$(document).height()); // Вниз
		return false;
	});
});

Его можно использовать самостоятельно, в этом случае проследите, чтобы перед ним был подключен файл библиотеки jquery.js.
А вот с условием для конца документа, определяющим поведение кнопки, задаваемое через JavaScript и CSS, возникли проблемы, причем разные для разных браузеров.
Решил посмотреть в чем дело. Для этого пришлось создать довольно монструозную конструкцию:


$('body').append('<p style="position: fixed; color: #fff; background-color: #000; line-height: 1.5em; top: 50%; left: 10px;">window.sum: ' + ($(window).scrollTop() + $(window).height()) + ' window.scrollTop: ' + $(window).scrollTop() + ' window.height: ' + $(window).height() + ' body.height: ' + $("body").height() + ' document.height: ' + $(document).height() + ' nav:' + nav + '</p>');

Я убрал ее из кода готового плагина, но любознательные могут временно вернуть сюда:


$(window).scroll(function() {
	.......
	.......
// сюда
});

Если у вас не предусмотрен режим оффлайн, лучше делать это на локальной машине.

В конце этой длинной-длинной строки есть переменная nav, которая принимает значения 1 или 0:


var nav = $.browser.mozilla ? 1 : 0;

Дело в том, что сравнение страницы в разных браузерах показало, что у движка Gecko document.height на единицу больше, чем сумма window.height + window.scrollTop.
Во всех остальных случаях эти величины равны, кроме ИЕ 7 или 8, где document.height наоборот, на единицу меньше, что в данном случае не критично.

Вот на таком костыле и работает условие для задания поведения кнопки «Вниз»:


if(($(this).scrollTop() + $(this).height() + nav) < $(document).height()) {
	// bla-bla-bla

if(($(this).scrollTop() + $(this).height() + nav) >= $(document).height()) {
	// другое  бла-бла-бла

Этот костыль будет актуален, пока разработчики из Mozilla Foundation не поменяют движок или его поведение. Впрочем, никто не гарантирует, что этого не сделает кто-то другой.

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

Опции плагинов Кнопки «Наверх/Вниз» и Кнопка «Наверх» одинаковы, кроме специфичных для каждого плагина.

Не исключаю багов, код «с пылу, с жару», хотя проверил во всех доступных браузерах под XP, 7 и Ubuntu 10.04. Пишите, если что. В ИЕ 7 есть косячок с отображением, но тратить время на инвалида не хочу. В ИЕ 6 не работает фиксированное позиционирование. но это надо решать кардинально или ну его вообще.

Upd 24.08 в 21:15. Скрипт полноценно работает в ИЕ 6, 7. В ИЕ 6 эмулируется position: fixed, помогло последнее по счету решение отсюда.
Вот как это выглядит в плагине:


<!--[if IE 6]>
<style type="text/css">
html {
	background: url(about:blank);
	background-attachment: fixed;
}
#gtb_pos {
	position: absolute;
	top: expression(parseInt(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight, 10) -300 + "px");
}
</style>
<![endif]-->

Кстати. для плагина Кнопка «Наверх» оно не помогло, там с ним кнопка скачет как умалишенная.

Пришлось добавить временный костыль для Оперы, в ней не уживаются скрипт скроллинга и jQuery Tooltips. В поисках максимально кроссбраузерного решения немного изменил код, заодно улучшил поведение кнопок.
Использовал синтаксис Here-документ для вывода JavaScript/CSS в секцию head, избавился от экранирующих бэкслэшей.

Скачать плагин Кнопки «Наверх/Вниз»

Loading comments …   ←   Кнопки «Наверх ⁄ Вниз» – плагин для MaxSite

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*