Библиотека JavaScript | js-функции
http://belarusweb.net
Основы создания сайтов

jL.page_up() и jL.page_down()

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

Методы jL.page_up() и jL.page_down() используются для прокрутки текущей страницы вверх и вниз. Для этого, например, можно назначить обработчик события требуемому элементу elem, использовав конструкцию elem.addEventListener('click', jL.page_up) или elem.addEventListener('click', jL.page_down).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Библиотека JavaScript</title>
	<!-- Прописываем базовый путь -->
	<base href="http://belarusweb.net/">

	<!--  Подключаем нашу общую библиотеку с js-скриптами  -->
	<script src="downloads/js/js_lib/lib.js"></script>
	<!--  Подключаем таблицу стилей страницы  -->
	<link href="downloads/js/js_lib/exls/exl_1/exl_1.css" rel="stylesheet"></link>
	
</head>
<body>

<!-- Прокрутка страницы вниз -->
<div id="scroll_down">&#9660;</div>

<p>
	Кликните по нужной стрелке, чтобы прокрутить окно вниз или вверх.
</p>
	
<!-- Прокрутка страницы вверх -->
<div id="scroll_up">&#9650;</div>

</body>

<!--  Подключаем скрипты страницы  -->
<script src="downloads/js/js_lib/exls/exl_1/exl_1.js"></script>
	
</html>
/* Немного оформляем наши стрелки */
#scroll_down,
#scroll_up{
width: 2rem;
font-size: 2rem;
color: green;	
text-align: center;
cursor: pointer;
opacity: 0.7;
}

/* При наведении курсора делаем стрелки непрозрачными */
#scroll_down:hover,
#scroll_up:hover{
opacity: 1;
}

/* Добавляем отступ, чтобы появилась полоса прокрутки */
#scroll_up{
margin-top: 300rem;	
}













	
//Находим наши стрелки на странице по их id
var scroll_down = document.getElementById('scroll_down');
var scroll_up = document.getElementById('scroll_up');

//Устанавливаем им соответствующие обработчики кликов
scroll_up.addEventListener('click', jL.page_up);
scroll_down.addEventListener('click', jL.page_down);