How to highlight active anchor link?

Question

css

Hello!

There is anchor navigation on a one-page site, when scrolling the page to a certain element with an anchor (for example, H1), you need to change the class of the corresponding link in the navigation, for example, to .active, and, accordingly, so that when scrolling to another anchor, the .active class is deleted from the previous link and was appointed next.

While only smooth scrolling to the corresponding anchor is implemented in JQuery, I would like to supplement this script. Working code on jsfiddle: jsfiddle.net/yvoys547
Thanks!

Code for navigation and blocks with anchors:

<nav class="nav">
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#thirst">Thirst</a></li>
      <li><a href="#four">Four</a></li>
    </nav>

    <h1 id='first'>Заголовок First</h1>
    <p>...</p>

    <h1 id='second'>Заголовок Second</h1>
    <p>...</p>

    <h1 id='thirst'>Заголовок Thirst</h1>
    <p>...</p>

    <h1 id='four'>Заголовок Four</h1>
    <p>...</p>

Smooth scrolling code

$(document).ready(function(){
    $(".nav").on("click","a", function (event) {
        // исключаем стандартную реакцию браузера
        event.preventDefault();
 
        // получем идентификатор блока из атрибута href
        var id  = $(this).attr('href'),
 
        // находим высоту, на которой расположен блок
            top = $(id).offset().top;
         
        // анимируем переход к блоку, время: 800 мс
        $('body,html').animate({scrollTop: top}, 800);
    });
});

Answer 1

I will offer my own version (for switching accuracy, you need to play with the top and bottom values)
jsfiddle.net/bonilka/p7sgwg4L

Answer 2

function scroll_active() {

        /* вычисляем значения прокрутки страницы по вертикали */

        var window_top = $(window).scrollTop();

        /* вычисляем положение якорей на странице от начала страницы  по вертикали*/

        var menu_top = $('a[name="menu"]').offset().top -10;

        var gallery_top = $('a[name="gallery"]').offset().top -10;

        /* раздел «Контакты»  у меня на странице расположен самым последним разделом, и небольшой, поэтому если контаты уже отобразались на странице, тогда  активирую пункт меню «Контакты»  */

        var contacts_top = $('a[name="contacts"]').offset().top -  $(window).height() + 180;

        /* Переключатель активного пункта меню в зависимости от положения на странице, условии написаны от последнего якоря на странице, до первого */

        /* если на экране отображаются раздел «Контакты»*/

        if (window_top > contacts_top) {

                $(".main_menu li").removeClass("active");

                $('a[href="#contacts"]').parent().addClass("active");

                }

        /* если не отображается раздел «Контакты», но страницу прокрутили  ниже якоря третьего раздела*/

        else if (window_top > gallery_top) {

                $(".main_menu li").removeClass("active");

                $('a[href="#gallery"]').parent().addClass("active");

                }

        /* если выше третьего, но ниже якоря второго раздела*/

        else if (window_top > menu_top) {

                $(".main_menu li").removeClass("active");

                $('a[href="#menu"]').parent().addClass("active");

                }

        /* если не подходят условия предыдущие активируем первый пункт меню*/

        else {

                $(".main_menu li").removeClass("active");

                $('a[href="#page_top"]').parent().addClass("active");

                }

}

jQuery(function()

{

        jQuery(window).scroll(scroll_active);

});

Answer 3

You can highlight without changing the classes, but through the :target
pseudo-class For your example, you need to add the following

h1:target{
/*тут стиль для подсвечивания*/
}