Новый взгляд на скольжение страницы “Наверх”

demosourse

Забавная реализация функционала прокрутки страницы до её начала. Зацените)

Инструкции

Elevator.js - это чистый JS плагин, который можно полностью настроить под свои нужды.

JS

Нам необходимо создать объект Elevator и передать аудио нарезки.

<script>
// Elevator должен быть подключён выше.

window.onload = function() {
  var elevator = new Elevator({
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}

// вызов плагина
elevator.elevate();
</script>

Вы так же можете воспользоваться настройкой по ключу "element". При клике на данный элемент будет осуществлён основной функционал.

<div class="elevator-button">Back to Top</div>

<script>
// Elevator должен быть подключён выше.

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}
</script>

Если эффект в стандартном виде вам не нравится, то вы можете отключить аудио и указать время прокрутки до начала страницы.

<div class="elevator-button">Back to Top</div>

<script>
// Elevator должен быть подключён выше.

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    duration: 1000 // milliseconds
  });
}
</script>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tholman.com/elevator.js/
Перевел: Станислав Протасевич
Урок создан: 23 Апреля 2015
Просмотров: 7769
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^