Вернуться к уроку

Кнопка вверх-вниз

важность: 3

Создайте кнопку навигации, которая помогает при прокрутке страницы.

Работать должна следующим образом:

  • Пока страница промотана меньше чем на высоту экрана вниз – кнопка не видна.
  • При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка «стрелка вверх».
  • При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на «стрелка вниз» и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на «стрелка вверх».

Должен получиться удобный навигационный помощник.

Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху.

Открыть песочницу для задачи.

Добавим в документ 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';
  }

}

Открыть решение в песочнице.