#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}
Саму идею вы поняли, а уже какой блок куда скролить и как стилизовать, решайте сами :)
Ответ 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]); // проверяем отображается ли элемент на экране
}
});
})
Ответ 4
В js смотрим, докрутили ли мы страницу до самого-самого низа (или до самого-самого
верха). Если да - запускаем скрипт:
Скрипт аяксово загружает следующую (или предыдущую) страницу - главу в статье.
Когда страница полностью загружена - скрипт меняет содержимое body на эту страницу,
а скролл перебрасывает в противоположную сторону (таким образом из конца главы №1 мы
оказываемся в начале главы №2, а из начала главы №2 - в конце главы №1).
