Страницы

Поиск по вопросам

среда, 17 октября 2018 г.

Автоматический переход к якорю. Как?

Всем здравствуйте!
Подскажите, пожалуйста, как реализовывается следующий функционал: на странице есть якори, когда прокручиваешь страницу в самый низ — автоматически переходим до следующего якоря. Тоже самое возможно сделать и в обратную сторону, т.е. назад.
Как такое может быть сделано?


Ответ

Набросал маленький скрипт реализации данной функции. На первый взгляд сложновато, но логику понять можно: У нас есть блоки с собственным скроллом. Когда мы листаем до конца, то один блок скрывается, а второй открывается уже со своим скороллом. Тем самым создаётся эффект, что ты начинаешь скроллить с начала страницы.
$(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}

Текст 0
Текст 1
Текст 2
Текст 3

Саму идею вы поняли, а уже какой блок куда скролить и как стилизовать, решайте сами :)

Комментариев нет:

Отправить комментарий