when scrolling the page in window.location.hash insert the hash of the corresponding block id to which I crush, and it appears in the address bar, but at the same time everything lags especially when scrolling up, and without this code all the rules

  if ( $(document).scrollTop() > refElement.position().top) { window.location.hash = this.hash; }

Is it really possible to remove lags? To be honest, I don’t even know how to formulate a question (((

 $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); //console.log(this.hash) /* решение проблемы */ if ( $(document).scrollTop() > refElement.position().top) { window.location.hash = this.hash; } } else{ currLink.removeClass("active"); // window.location.hash = this.hash; } }); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color: rgba(0, 0, 0, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 0 0 0 0; } #menu-center ul li a{ padding: 32px 40px; } #menu-center ul li { list-style: none; margin: 0 0 0 -4px; display: inline; } .active, #menu-center ul li a:hover { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; background-color: rgba(0, 0, 0, 0.12); padding: 32px 40px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 72px; } #home { background-color: #286090; height: 100vh; width: 100%; overflow: hidden; } #portfolio { background: gray; height: 100vh; width: 100%; } #about { background-color: blue; height: 100vh; width: 100%; } #contact { background-color: rgb(154, 45, 45); height: 100vh; width: 100%; } </style> <div class="m1 menu"> <div id="menu-center"> <ul> <li><a class="active" href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> <div id="home"></div> <div id="portfolio"></div> <div id="about"></div> <div id="contact"></div>

    1 answer 1

    Try using window.history.pushState . But this may not solve the problem.

    You can read about it here.

    The most effective in my opinion is to put a timeout . The fact is that the scroll event is triggered very often.

    1) create a variable, for example timer

    2) wrap your code in timeout

     // обнуляете таймер clearTimeout(timer) // запускаете таймаут timer = setTimeout(function() { clearTimeout(timer); if ( $(document).scrollTop() > refElement.position().top) { // меняете хэш window.location.hash = this.hash; } }, 50)