Событие "onscroll"

tutorial/browser/events/scroll-position/index.html.

Добавим в документ DIV с кнопкой:

<div id="updown"></div>

Сама кнопка должна иметь «position:fixed».

#updown {
  position: fixed;
  top: 30px;
  left: 10px;
  cursor: pointer;
}

Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:

#updown {
  height: 9px;
  width: 14px;
  position: fixed;
  top: 30px;
  left: 10px;
  cursor: pointer;
}

#updown.up {
  background: url(updown.gif) left top;
}

#updown.down {
  background: url(updown.gif) left -9px;
}

Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.

Состояние — это просто класс элемента: up/down или пустая строка, если кнопка не видна.

При прокрутке состояния меняются следующим образом:

window.onscroll = function() {
  var pageY = window.pageYOffset || document.documentElement.scrollTop;
  var innerHeight = document.documentElement.clientHeight;

  switch(updownElem.className) {
    case '':
      if (pageY > innerHeight) {
        updownElem.className = 'up';
      }
      break;

    case 'up':
      if (pageY < innerHeight) {
        updownElem.className = '';
      }
      break;

    case 'down':
      if (pageY > innerHeight) {
        updownElem.className = 'up';
      }
      break;
  }
}

При клике:

var pageYLabel = 0;

updownElem.onclick = function() {
  var pageY = window.pageYOffset || document.documentElement.scrollTop;

  switch(this.className) {
    case 'up':
      pageYLabel = pageY;
      window.scrollTo(0, 0);
      this.className = 'down';
      break;

    case 'down':
      window.scrollTo(0, pageYLabel);
      this.className = 'up';
  }

}

Полное решение: tutorial/browser/dom/updown/index.html.

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

Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого — указать ее вызов в скрипте под страницей, вот так:

... страница ...

function showVisible() {
  var imgs = document.getElementsByTagName('img');
  for(var i=0; i<imgs.length; i++) {

    var img = imgs[i];

    var realsrc = img.getAttribute('realsrc');
    if (!realsrc) continue;

    if (*!*isVisible(img)*/!*) {
      img.src = realsrc;
      img.setAttribute('realsrc', '');
    }
  }
}

*!*
showVisible(); 
window.onscroll = showVisible;
*/!*

При запуске функция ищет все видимые картинки с realsrc и перемещает значение realsrc в src. Обратите внимание, т.к. атрибут realsrc нестандартный, то для доступа к нему мы используем get/setAttribute. А src — стандартный, поэтому можно обратиться по DOM-свойству.

Функция проверки видимости isVisible(elem) получает координаты текущей видимой области и сравнивает их с элементом.

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

Как получить метрики элемента и страницы, описано в статье Размеры и прокрутка элементов.

Итоговая функция:

function isVisible(elem) {

  var coords = getOffsetRect(elem);

  var windowTop = window.pageYOffset || 
    document.documentElement.scrollTop;
  var windowBottom = windowTop +
    document.documentElement.clientHeight;

  coords.bottom = coords.top + elem.offsetHeight;

  // верхняя граница elem в пределах видимости 
  // ИЛИ нижняя граница видима
  var topVisible = coords.top > windowTop 
    && coords.top < windowBottom;
  var bottomVisible = coords.bottom < windowBottom 
    && coords.bottom > windowTop;

  return topVisible || bottomVisible;
}

В решении также указан вариант с isVisible, который расширяет область видимости на +-1 страницу (высота страницы — document.documentElement.clientHeight).

Решение: tutorial/browser/dom/lazyimg/index.html.