1

Как реализовать с помощью html5 history смену url при прокрутке страницы как на этом сайте: http://www.collectif-yay.com/

Облазил кучу форумов, но может плохо искал.

Как при нажатии на кнопки изменяется контент понятно, (http://xozblog.ru/demo/history-api-demo/pushState/), но вот как это сделать на одностраничнике?

2 ответа 2

1

Нашёл на просторах интернета, прикрутил к странице, на которой 4 дива. Всё работает. Спасибо за ответы. Если кому интересно:

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom = docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView("#slide1")) { window.history.pushState("state", "title", "/slide1"); return; }
    if (isScrolledIntoView("#slide2")) { window.history.pushState("state", "title", "/slide2"); return; }
    if (isScrolledIntoView("#slide3")) { window.history.pushState("state", "title", "/slide3"); return; }
    if (isScrolledIntoView("#slide4")) { window.history.pushState("state", "title", "/slide4"); return; }
}); 
3
  • Заметил один косяк, что при прокрутке до определённого див и обновлении страницы, выкидывает ошибку.if (isScrolledIntoView("#div1")) { window.history.replaceState("state", "title", "#home"); return; }если добавить #, то при обновлении урл находится, и это логично. Но интересует, будет ли данный метод индексироваться поисковиками? Commented 16 дек. 2015 в 15:58
  • Нашёл в просторах сети скрипт fullpage js, который включает в себя шаблоны одностраничников + history api. Commented 16 дек. 2015 в 21:36
  • создал index.html, home.html, div2.html и т.д (с одинаковым содержимым), убрал #, теперь когда крутим index.html то ссылки подставляются без # и без .html (убрал через .htaccess) . Теперь при обновлении страницы сайт открывается в том же месте (например докрутили до див3, обновили страницу, открывается div3.html и с помощью scrollTop опускается до див3. Только вот не знаю что добавить в скрипт, чтобы использовать history.back() и history.forward(), чтобы при прокрутке от див1 до див2 и нажатии в браузере "назад" возвращалось обратно к див1?(код тот же, только вместо push у меня replace) Commented 17 дек. 2015 в 20:00
0

Просто вызывайте pushState() не по нажатию на элемент, а по прокрутке страницы - вам совсем ничего не мешает выполнять действия в ответ на события отличные от 'click'.

На том сайте вешают обработчик на $(window).scroll, внутри которого сверяют вертикальную позицию скроллбара(возвращается функцией $(window).scrollTop()) с заранее подсчитанной(путем последовательного сложения высот) вертикальной позицией каждой секции(тега <section>).

Когда становится понятно, что секция сменилась - они вызывают pushState() с соответствующим секции относительным url. Таким образом, при прокруте окна до нужной секции, сразу же меняется url в строке браузера.

2
  • Интересно, а тот одностраничник сделан на 1 файле с несколькими div или же несколько html файлов подгружаются при прокрутке, например slide1.html, slide2.html ну и так далее? В программировании не силён, поэтому задаю такой вопрос. Просто необходимо сделать одностраничник дружественный с SEO. Commented 16 дек. 2015 в 9:05
  • @АртемСмотров, там всё в одном html-файле - он одинаково выдаётся для всех url. Просто при подгрузке картинок полоса прокрутки программно перемещается к началу нужной секций. Commented 16 дек. 2015 в 13:13

Ваш ответ

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

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