Всем здравствуйте!
Подскажите, пожалуйста, как реализовывается следующий функционал: на странице есть якори, когда прокручиваешь страницу в самый низ — автоматически переходим до следующего якоря. Тоже самое возможно сделать и в обратную сторону, т.е. назад.
Как такое может быть сделано?
Ответ
Набросал маленький скрипт реализации данной функции. На первый взгляд сложновато, но логику понять можно: У нас есть блоки с собственным скроллом. Когда мы листаем до конца, то один блок скрывается, а второй открывается уже со своим скороллом. Тем самым создаётся эффект, что ты начинаешь скроллить с начала страницы.
$(function() {
var blocks_list = ['#block--0', '#block--1', '#block--2', '#block--3'],
index = null;
var $block = $('.block');
// Открываем первый блок
location.href = '#block--0';
index = 0;
// Запускаем скролл блоков
$block.scroll(function() {
var scroll_all = this.scrollHeight,
scroll_top = $(this).scrollTop(),
scroll_bottom = $(this).scrollTop() + $(window).height();
// ЕСЛИ ДОЛИСТАЛИ ДО НИЗУ И ЕСЛИ СЕЙЧАС ОТКРЫТ НЕ ПОСЛЕДНИЙ БЛОК
if( scroll_bottom === scroll_all && index !== blocks_list.length - 1){
// Добавляем + 1 к индексу
index++;
// Заменяем адрес
location.href = blocks_list[index];
// Скролим следущий блок, чтобы всё выглядело красиво
$(blocks_list[index]).scrollTop( 50 );
};
// ЕСЛИ СКРОЛЛ ВВЕРХУ И ЕСЛИ СЕЙЧАС ОТКРЫТ НЕ ПЕРВЫЙ БЛОК
if( scroll_top === 0 && index !== 0){
// Вычитаем - 1 у индекса
index--;
// Заменяем адрес
location.href = blocks_list[index];
// Скролим пердидущий блок, чтобы всё выглядело красиво
$(blocks_list[index]).scrollTop(function(e, scrollTop) {
return scrollTop - 50;
});
};
});
});
html, body {height: 100%; margin: 0}
/* Скрываем все блоки */
.block {
display: none;
height: 100%;
overflow: auto;
}
/* Открываем блок соответствующий якорю */
.block:target {
display: block;
}
/* Стилизуем контент блоков */
.block-content {
height: 1500px;
padding: 50px 0 0;
}
#block--0 .block-content {background-color: #ff9191}
#block--1 .block-content {background-color: #6dc36d}
#block--2 .block-content {background-color: #8686c1}
#block--3 .block-content {background-color: #e2e26e}
Саму идею вы поняли, а уже какой блок куда скролить и как стилизовать, решайте сами :)
Комментариев нет:
Отправить комментарий