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

#javascript #jquery #scroll #прокрутка

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

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

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

Ответы

Ответ 1

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



$(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





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


Ответ 2

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

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

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


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


Ответ 3

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

Проверяем какой якорь находится на экране и меняем хеш страницы. 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]); // проверяем отображается ли элемент на экране
    }
  });
})

Часть 1

Часть 2

Часть 3



Ответ 4

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