Javascript.RU

Кнопка вверх вниз на 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

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

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

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

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

+4

Автор: Raxen (не зарегистрирован), дата: 3 апреля, 2012 - 16:07
#permalink

Подскажите, с каким бубном нужно плясать, чтоб данные кнопки работали в xslt?


Автор: Kripipasta (не зарегистрирован), дата: 6 октября, 2013 - 08:33
#permalink

Спасибо, работает. Но только при переворачивании телефонов перестает работать... =((


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
8 + 7 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
seoneo
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum