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

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

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

Пока страница промотана меньше чем на высоту экрана вниз — кнопка не видна.
При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка «стрелка вверх». При нажатии на нее страница запоминает текущую прокрутку и прыгает вверх, а кнопка меняется на «стрелка вниз» и остается такой, пока посетитель не прокрутит вниз больше, чем один экран, после чего вновь изменится на «стрелка вверх».
Нажатие на «стрелка вниз» отправляет обратно на запомненную позицию.

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

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

Открыть в новом окне

Исходный документ с кнопкой: tutorial/browser/dom/updown-src/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.

#400

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

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!