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

10 Май
2012

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

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



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

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

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

Рабочий пример можно скачать по ссылке
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх