nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Кнопка вверх вниз для сайта на javascript. Плавный скроллинг наверх вниз. Скрипт кнопки вверх вниз как вконтакте для ucoz.

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

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

Изначально я конечно посмотрел вот этот пример:
http://learn.javascript.ru/task/knopka-vverh-vniz
Но меня такое рукоделие не устраивает по очень многим причинам.
- Во первых не понятно будет ли работать код во всех браузерах.
- Во вторых что это за резкие рывки скроллинга?
- Ну и в третьих меня не устраивает сам код, а точнее его область видимости которой просто нет.

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

Для стрелки вверх и вниз я взял картинку в виде ромба
стрелка вверх вниз
С помощью javascript мы ее нарежем на нужные нам куски.

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

Пишем код:

Первым делом подключаем мною любимую библиотеку 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

Зачет, все работает.

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

скачать

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

http://scriptjava.net/documentation

Вас зовут:

Ваш комментарий:


Код на картинке: