Pull to refresh

Кнопка вверх вниз на javascript, скролинг страницы с помощью яваскрипта

В поисках хорошего кода кнопки вверх и вниз я набрел на это рукоделие и решил написать свое рукоделие

Вот мои пожелания:



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

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

image

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

Вот что у меня получилось:



<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<script type="text/javascript">
(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(img/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);
		}
	});
})();
</script>


Вот собственно и все, главное не забудте в скрипте правильно указать адрес на картинку updown.png

Код протестирован в браузерах:
Netscape Navigator 7
Netscape Navigator 9
Internet Explorer 7
Internet Explorer 8
Google Chrome 16
Opera 10
Safari 5
Mozilla Firefox 3

Рабочий пример можно скачать по ссылке
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.