Дополнительные настройки для элемента меню

Рейтинг: 2.7804  
На голосовании
Предложил Пользователь 2357441 23.08.2018 11:49:39

Дополнительные настройки для элемента меню

Сделать более тонкие настройки для элемента меню когда двигаемся к блоку:
1. Нужен отступ от элемента к которому двигаемся, из за того что шапки меню бывают фиксированными и разной высоты. И когда мы двигаемся к элементу она может перекрыть какую то важную часть элемента и будет некрасиво.
2. Нужна возможность указать чтобы двигаться не к верху блока, а к какому то элементу внутри этого блока по указанному селектору.
3. Нужна опция чтобы регулировать скорость скрола (без анимации, очень медленно, медленно, средне, быстро, очень быстро)
4. Нужна опция чтобы указывать эффект скрола (transition-timing-function) (linear, ease, ease-in, ease-out, ease-in-out...)
см. скриншот. https://drive.google.com/file/d/1DR-zMql3FoHashMTYCbVvivue-zlJU-L/view?usp=sharing

Рейтинг: 0  
Пользователь 2357441 23.08.2018 14:07:30
Сейчас пользуюсь своим скриптом на коленке накидал. Может как основа для этой идеи зайдёт.
//Плавный переход к блокам START
$(document).on('click', '.headerA a', function(event) {
        event.preventDefault();

        //Регулируем расстояние в px от низа шапки до верха элемента. Положительные и отр. числа.
        var margin = -40;
        //Скорость скролла
        var scrollSpeed = 500;
        //Селектор шапки
        var header = "header";

        //Находим селектор блока к которому будем двигаться
        var url = $(this).attr("href");
        var array = url.split('/');
        var selector = array[array.length-1];
        var position = $(selector).position();

        //Итоговая высота шапки
        var headerH = $(header).height();
        headerH = headerH + margin;

        //Двигаемся
        $('html, body').animate({ scrollTop: (position.top - headerH) }, scrollSpeed);

});
//Плавный переход к блокам END