Чертёж десятый, «половина» последняя: JS, ещё немного

Сегодня попробуем соединить обе цели применения JS — «красивость» и функциональность, создав на Клавиной страничке «плавающую» кнопку, которая всегда будет находиться в правом нижнем углу окна браузера и при щелчке по ней прокручивать страничку вверх, к её началу.

  • Создай на Клавиной страничке (файл klava.htm) объект <DIV>, который и будет нашей «плавающей» кнопкой:
    • <DIV id="kn" style="position:absolute; width:100; height:40; font-size:150%;"
	class="panelka"
	onClick="scrollBy(0,-document.body.scrollTop)">
		Вверх
</DIV>
  • В тег <BODY> запиши события, которые мы будем обрабатывать:
    • <BODY onScroll="menu()" onResize="menu()" onLoad="menu()">
  • В раздел <HEAD> запиши функцию JS:
    • <SCRIPT type="text/javascript">
function menu()
{	kn.style.top=document.body.scrollTop+
 		document.body.clientHeight-60;
 	kn.style.left=document.body.scrollLeft+
 		document.body.clientWidth-110;
}
</SCRIPT>
  • Вот и всё. А теперь разберёмся с некоторыми новыми объектами, их методами и событиями.

События onScroll и onResize возникают, соответственно, при прокручивании документа и при изменении размера окна браузера. И в том, и в другом случае, а также при загрузке документа запускается функция menu().

В этой функции у объекта kn изменяются координаты, причём задаются они не относительно документа, а относительно той его части, которая видна в окне браузера. Дают нам такую возможность свойства scrollTop и scrollLeft объекта body, которые содержат текущие координаты левого верхнего угла той части документа, который виден в окне. К этим величинам мы добавляем ширину clientWidth и высоту clientHeight окна браузера. А вот зачем нужны числа 60 и 110, от чего они зависят и что зависит от них, ты подумаешь и ответишь сам.

Ну и, наконец, метод scrollBy(0,-document.body.scrollTop) вызывает прокрутку документа в окне браузера вправо (первый аргумент) и вниз (второй аргумент метода).

  • Задание: создай «плавающее» меню, которое при прокрутке документа всегда находится в правом верхнем углу окна, а при наведении указателя мышки «раскрывается», то есть изменяет свою высоту, и предоставляет в наше распоряжение ссылки на все страницы сайта:
и

Дальше