Кнопка вверх вниз на javascript. Кнопка наверх. Кнопка вниз. Скролинг страницы на javascript.

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

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

Изначально я конечно посмотрел вот этот пример:
Пример рукоделия
Но меня такое рукоделие не устраивает по очень массе причин.
- Во первых не понятно будет ли работать код во всех браузерах.
- Во вторых что это за резкие как понос рывки скроллинга?
- Ну и в третьих меня не устраивает сам код, а точнее его область видимости которой просто нет.

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

Для стрелки в верх и вниз я взял картинку в виде ромба

С помощью яваскрипта мы ее нарежем на нужные нам куски.

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

Пишем код:

Первым делом присобачиваем мною любимую библиотеку scriptjava

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

И пишем собственно сам рабочий код на ней.

(function () {
	var page_up_div;
	var page_up_key;
	var page_up_nokey;
	var page_up_div_create = function () {
		page_up_div = $$i({
			create:'div',
			attribute: {},
			insert:$$().body
		}).$$('position','fixed').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('zIndex','5').$$('width','14px').$$('height','7px').$$('backgroundImage','url(updown.png)').$$('backgroundPosition','0 0').$$('backgroundRepeat','no-repeat').$$('cursor','pointer');
	}
	
	var page_up_timer = function () {
		if(page_up_nokey) {
			if($$s.scrollpos().t>=0 && $$s.scrollpos().t<=300) {
				$$(page_up_div).$$('visibility','hidden');
			}
			else if($$s.scrollpos().t>300 && $$s.scrollpos().t<=1000) {
				page_up_key=false;
				$$(page_up_div).$$('visibility','visible').$$('top','50px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 -7px');
			}
			else if($$s.scrollpos().t>1000) {
				page_up_key=true;
				$$(page_up_div).$$('visibility','visible').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 0');
			}
		}
	}
	
	var pos_top,z;
	var page_up_to_up_go = function () {
		if(page_up_key) {
			pos_top=pos_top-z;
			z=z+10;
			if(pos_top<0) {
				page_up_nokey=true;
				pos_top=0;
			}
			window.scrollTo(0, pos_top);
			if(pos_top>0) {
				setTimeout(function() { page_up_to_up_go(); },10);
			}
		}
		else {
			pos_top=pos_top+z;
			z=z+10;
			if(pos_top>=($$s.scrollsize().h-$$s.clientsize().h)) {
				page_up_nokey=true;
				pos_top=($$s.scrollsize().h-$$s.clientsize().h);
			}
			window.scrollTo(0, pos_top);
			if(pos_top<($$s.scrollsize().h-$$s.clientsize().h)) {
				setTimeout(function() { page_up_to_up_go(); },10);
			}
		}
	}
	
	var page_up_to_up = function (event) {
		page_up_nokey=false;
		z=10;
		pos_top=$$s.scrollpos().t;
		setTimeout(function() { page_up_to_up_go(); },10);
	}
	
	$$r(function() {
		if(($$s.scrollsize().h-$$s.clientsize().h)>1000) {
			page_up_nokey=true;
			page_up_div_create();
			$$e.add($$(page_up_div),'click',page_up_to_up); 
			page_up_timer();
			setInterval(function() { page_up_timer(); },100);
		}
	});
})();

Вот собственно и все, главное не забудте в скрипте правильно указать адрес на картинку updown.png
Теперь нужно убедиться что код на самом деле работает в браузорах которые мэден из йопы.
Произвожу тест на браузерах

Netscape Navigator 7
Netscape Navigator 9
Internet Explorer 7
Internet Explorer 8
Google Chrome 16
Opera 10
Safari 5
Mozilla Firefox 3

Зачет, все пашет без вздрючивания.

Готовый пример можно скачать по ссылке:

Скачать пример

Если что не ясно, то прямиком сюда
Документация