How to display id in address bar when scrolling?

Question

css

There is an example site cp-templates.ru . When we start scrolling, the id that is assigned to different sections changes in the address bar. How to implement this please help

Answer 1

Here is the code that is responsible for this. Look, understand, there is nothing complicated.

var deftitle = document.title;
var defurl = document.location.toString().split('#', 2)[0];
var stPoint = 0, anchors = [], anchTop = [];
$(function(){
  anchors[0]="ac_1309";anchors[1]="ac_769";anchors[2]="ac_876";anchors[3]="ac_894";anchors[4]="ac_903";anchors[5]="ac_912";anchors[6]="ac_1158";anchors[7]="ac_1153";anchors[8]="ac_2249";anchors[9]="ac_1128";anchors[10]="ac_767";anchors[11]="ac_2047";anchors[12]="ac_1453";
  for(var i = 0; i < 13; i++) {
    anchTop[i] = $('#'+anchors[i]).offset().top;
  }
  var lastrel = '';
  $('a[href^="#/"]').bind("click", function(e){popupScroll($(this).attr('href'),true);e.preventDefault();});
  if (window.location.hash && window.location.hash.substr(0, 2) == "#/") popupScroll(window.location.hash,false);
  $(document).on('keyup', function(e){
    if (e.which == 27) $.each($('.popupContent'), function(i, val) {popupClose(val.id.substr(2));});
  });

  $(window).scroll(function(){
    stPoint = $(window).scrollTop();
    var rel = '';
    for (i = 0; i < 13; i++) {
      if ((anchTop[i] - 1) <= stPoint && !$('#'+anchors[i]).parent().parent().hasClass('phidden')) {
        rel = anchors[i];
        if (anchTop[i+1] != undefined && (anchTop[i+1] - 1) > stPoint || $('#'+anchors[i]).parent().parent().hasClass('popupContent')) break;
      }
    }
    if (lastrel != rel) {
      if (lastrel) {
        if (rel == 'ac_1309' || rel == '') {
          if (deftitle != document.title) document.title = deftitle;
          if (history && history.replaceState) history.replaceState(null, null, defurl);
        } else {
          document.title = $('#'+rel).attr('title')+' '+deftitle;
          if (history && history.replaceState) history.replaceState(null, null, '#'+$('#'+rel+' span').attr('id'));
        }
      }
      lastrel = rel;
      $('.anchors').removeClass('msel');
      if (rel) $('.'+rel).addClass('msel');
    }
  });
  $(window).trigger('scroll');
});

Answer 2

window.location.hash

Answer 3

This can be done using location.hash. If you are not very versed in JS, then you need to freelance. They'll do it there.

Answer 4

Specifically, in this example, it was done through location.hash
But I would advise you to also look in the direction of history.replaceState