Гладкая прокрутка не работает на хеш URL

Question

У меня проблема с плавной прокруткой для тегов привязки на sidenav.Я использую bootsrap scrollspy с аффиксом.Заголовок является фиксированной позицией, поэтому, когда мы нажимаем на привязку бокового меню, он перемещается к определенному идентификатору.Проблема в том, что при прокрутке до идентификатора заголовок перекрывает содержимое, поэтому я добавляю некоторое смещение для прокрутки, но анимация не плавная, она мигает при каждом щелчке.Как я могу предотвратить мерцание и отрисовать анимацию плавно.(Для просмотра script / HTMl / CSS, пожалуйста, используйте источник просмотра)

Обновление: как я заметил, эта проблема возникает, когда мы отображаем #ID в URL.Любая идея, как мы можем сделать это гладким?

Вот ссылка с хешем, добавленная в URL: http://103.50.162.107/~chaitol4/test/nohash/expertise.html

URL без хеша: http://103.50.162.107/~chaitol4/test/hash/expertise.html

Обратите внимание наанимация при нажатии на элементы в sidenav

Мой JS:

 $(".smooth-scroll").click(function() {
       var headerHeight = 60;
       $('html, body').stop(true, true).animate({
       scrollTop: $(this.hash).offset().top - headerHeight
       }, 750);
        return false;
 });

Обновленный скрипт:

 $(document).ready(function() {
              $(".smooth-scroll").on('click', function(event) {
                var hash = this.hash;
                $('html, body').animate({
                    scrollTop: $(hash).offset().top - 60
                  }, 800, function(){
                    window.location.hash = hash;
                    event.preventDefault();
                });
                event.preventDefault();
              });

Это вычисляет неверное смещение верхней части (идет под меню)

Answer 1

Это ожидается.Поведение браузера по умолчанию заключается в привязке прокрутки к элементу с идентификатором, совпадающим с хешем.Jquery, вероятно, выполняет анимацию, но к моменту запуска анимации ваша прокрутка не нуждается в корректировке.

Решение будет состоять в том, чтобы выбрать один или другой, выделить элемент с помощью jQuery или прокрутить доэлемент с хешем id и url.

Answer 2

Проблема связана с гиперссылкой, а решение простое.

Замените все ваши гиперссылки в элементах li вашего списка навигации на обычный элемент span и привяжите к нему событие click.В этом событии click прокрутите до указанной позиции и обновите строку запроса.Обновление строки запроса с помощью javascript не приводит к тому, что браузер мгновенно переходит на эту позицию, что позволяет выполнять плавную прокрутку.

Функция javascript, которая необходима для изменения хеша после гладкой прокрутки, выглядит следующим образом:

history.pushState(null, null, '#myhash');

Сделал скрипку для иллюстрации.Заметка.Pushstate не работает в скрипке из-за ограничений.http://jsfiddle.net/xpvt214o/183435/