😎 » JavaScript » Примеры JavaScript » Смещение к якорю на высоту меню
139 0  

Смещение к якорю на высоту меню

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


$( document ).ready(function() {
    //получаем высоту панели
    var headerHeight = $('.navbar-default').outerHeight();
 
    $('a').on('click', function(e) {
        // определяем все якорные ссылки и высчитываем высоту к блоку прокрутки
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - headerHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
 
        //добавляем якорь в url
        history.pushState({}, "", this.href);
    });     
});

Где .navbar-default - класс фиксированного меню.


Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023