Подставляем ID блока в адресную строку (URL)

Была интересная задача по возврату пользователя к блоку, с которого он перешел. Распишу подробнее.

У нас есть где-то в середине страницы есть блок со своим id (его заранее прописали). В этом блоке есть ссылки. Если после перехода по ним вернуться обратно — то нужно вновь скролить сверху страницы и до блока. Что не очень удобно, особенно когда это важный блок для клиента (что возвращается обратно).

Что в таком случае делать?

На нужно изменить URL, добавить туда id нашего блока. И делать это, когда мы скроллом дошли до него.

А теперь код-решение:

function updateURL(dopUrl) {
    if (history.pushState) {
        var baseUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
        var newUrl = baseUrl + dopUrl;
        history.pushState(null, null, newUrl);
    }
    else {
        console.warn('History API не поддерживается');
    }
}

var postion = $('#block-7').offset().top,
    height = $('#block-7').height();
jQuery(document).on('scroll', function (){
  var scroll = $(document).scrollTop();
  if(scroll  > postion && scroll < (postion + height) ) {
    updateURL('#block-7');
  }
})

#block-7 — это как раз id нашего блока.

В начале мы получаем расстояние до него от верха страницы. Когда это расстояние преодолели (перед глазами стал наш блок) мы запускаем функцию подмены URL в адресной строке.

Код достаточно универсален, так что его можно переписать: подставлять GET и другие параметры. А так же вообще определять id блока, на котором находимся (а не прописывать в коде вручную).