Как подсветить активную якорную ссылку?

Question

[maxsmart]

Здравствуйте!

Есть якорная навигация на одностраничном сайте, нужно при прокрутке страницы до определенного элемента с якорем (например H1) изменить класс у соответствующей ссылки в навигации, например на .active, ну и соответственно чтобы при прокрутке до другого якоря, класс .active удалялся у предыдущей ссылки и назначался следующей.

Пока реализовано на JQuery только плавная прокрутка до соответствующего якоря, хотелось бы дополнить этот скрипт. Рабочий код на jsfiddle: jsfiddle.net/yvoys547
Спасибо!

Код навигации и блоков с якорями:

<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>

Код плавной прокрутки

$(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

[Никита К.]

Предложу свой вариант (для точности переключения нужно поиграть со значениями top и bottom)
jsfiddle.net/bonilka/p7sgwg4L

Comments

[maxsmart]

Спасибо, только есть тут недостаток, если я нажму на ссылку то прокрутка сработает (правда не плавная, как хотелось бы), но цвет ссылки не поменяется, а останется активная прежняя

[Никита К.]

Все работает, говорю же поиграйтесь со значениями
Вот с вашей плавной прокруткой jsfiddle.net/bonilka/p7sgwg4L

[maxsmart]

Никита К.: То что надо ) Спасибо! Буду разбираться на вашем примере.

[maxsmart]

maxsmart: Вот что получилось jsfiddle.net/tyta579n
у меня еще шапка сайта есть, со 100% высотой, там и располагается данное якорное меню, почему-то все равно, когда нажимаем на любую ссылку и возвращаемся на самый верх, то активный класс у First не пропадает

[maxsmart]

Никита К.: Вот что получилось jsfiddle.net/tyta579n
у меня еще шапка сайта есть, со 100% высотой, там и располагается данное якорное меню, почему-то все равно, когда нажимаем на любую ссылку и возвращаемся на самый верх, то активный класс у First не пропадает

[Алексей Клёнин]

Никита К., а как сделать чтобы при пролистывании от первого пункта к последнему, пункты поочерёдно не выделялись, а выделялся сразу только последний?
Без промежуточных выделений тех что посередине.

[Никита К.]

Алексей Клёнин, отключайте обработчик скрола на момент анимации, по окончании снова подписывайтесь.
jsfiddle.net/58yLm6hg

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);

});

Comments

[maxsmart]

А можете применить к моему примеру? Я не силен в джаве..

[Максим Е]

maxsmart: Пришло уведомление, что отмечено решением, а в вопросе не отмечено...

[Сергей Dydaevskiy]

Всем привет, не работает скрипт если в меню имеется ссылка вида:
<a href="/#portfolio">Портфолио</a>
Как заставить её тоже подсвечиваться?

Answer 3

[yavasilek]

Можно подсветить не изменяя классы, а через псевдокласс :target
Для Вашего примера необходимо добавить следующее

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

Comments

[Далер Абдурахимов]

через таргед тоже не виделяется псевдокласс :active на якорь

[Даулет Даулет]

в мобильной версии используется длинный горизонтальный меню с скроллом вправо (меню полностью не вмещается и клиенту нужно скроллить влево чтобы увидеть меню полностью)

так вот допустим ссылка №10 остается за экраном и при добавлении класса при достижении секции это клиенту не видно, как можно сделать так чтобы активный пункт меню всегда оставалось в видимой области экрана? возможно с сдвигом влево всего меню