6

Всем здравствуйте!

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

Как такое может быть сделано?

4 ответа 4

14
+50

Набросал маленький скрипт реализации данной функции. На первый взгляд сложновато, но логику понять можно: У нас есть блоки с собственным скроллом. Когда мы листаем до конца, то один блок скрывается, а второй открывается уже со своим скороллом. Тем самым создаётся эффект, что ты начинаешь скроллить с начала страницы.

$(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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="block" id="block--0">
  <div class="block-content">Текст 0</div>
</div>
<div class="block" id="block--1">
  <div class="block-content">Текст 1</div>
</div>
<div class="block" id="block--2">
  <div class="block-content">Текст 2</div>
</div>
<div class="block" id="block--3">
  <div class="block-content">Текст 3</div>
</div>

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

0
5

URL адресом можно управлять, если именно это вызывает вопрос:

window.history.pushState(null, null, '/#jakor1');
//в историю добавляется объект при вызове этой ф-ии - влияет на работу кнопок браузера назад/вперёд

window.history.replaceState(null, null, '/#jakor1');
//в историю НЕ добавляется объект при вызове этой ф-ии, но заменяется текущий объект истории

Обе ф-ии меняют урл в адресной строке. Также можно заскриптовать кнопки "Назад"/"Вперёд" браузера, чтобы вместо загрузки страницы был ajax с анимацией - см. jQuery(window).bind('popstate',yourBackCallback);

4

Вот вариант на "коленках" и не претендует на самый красивый код.

Проверяем какой якорь находится на экране и меняем хеш страницы. jQuery использовал только для быстроты написания трекинга скролла.

В вашем примере есть еще подгрузка частей через AJAX запросы, но главная суть отражена.

// функция проверки присутствует ли елемент на экрана
function checkVisible(element) {
  var showThreshold = parseInt(element.offsetHeight * .7),
      elementTop = window.innerHeight - element.getBoundingClientRect().top,
      elementBottom = element.getBoundingClientRect().bottom,
      isVisible = (Math.min(elementTop, elementBottom) - showThreshold) >= 0;
  if(isVisible){
    var newHash = element.getAttribute('name');
    if(window.location.hash != '#' + newHash) {
      window.location.hash = newHash;
      console.log('change hash to - ' + newHash);
    }
  }
}

$(function(){
  var links = document.querySelectorAll('a[name]'); // получаем все элементы для отслеживания
  $(document).on('scroll', function(){ //  трекаем скролл
    for(var i = 0; i < links.length; i++){
      checkVisible(links[i]); // проверяем отображается ли элемент на экране
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a name="part1">Часть 1</a></h2>
<img src="http://allo.aif.ru/img/top_img1.png">
<h2><a name="part2">Часть 2</a></h2>
<img src="http://allo.aif.ru/img/top_img1.png">
<h2><a name="part3">Часть 3</a></h2>
<img src="http://allo.aif.ru/img/top_img1.png">

0
3
  1. В js смотрим, докрутили ли мы страницу до самого-самого низа (или до самого-самого верха). Если да - запускаем скрипт:

  2. Скрипт аяксово загружает следующую (или предыдущую) страницу - главу в статье.

  3. Когда страница полностью загружена - скрипт меняет содержимое body на эту страницу, а скролл перебрасывает в противоположную сторону (таким образом из конца главы №1 мы оказываемся в начале главы №2, а из начала главы №2 - в конце главы №1).

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.