Плавная прокрутка к разделу хэш URL и атрибут данных

Question

У меня есть ссылки в навигации, которые при нажатии должны открыть новую страницу и прокрутить до определенного раздела.К ссылке будет добавлен хеш, который должен отображаться с идентификатором данных раздела.

HTML Это разметка навигационной ссылки

 <ul class="menu-list-level-2">
     <li class="no-submenu">
    <div class="menu-item"  data-link="navigation-1-1">
      <a href="home.html#vision" class="sub-category active">
      Our Brand
       </a>
      </div>
     </li>
    </ul>

Это разметка дляразделы, которые открытая страница должна прокручивать до

<div class="section-to-scroll" data-id="vision">
    </div>

Примечание: у меня не может быть идентификаторов в разделах, поэтому я должен иметь дело с идентификаторами данных.

Js

var hashURL = location.hash
smoothScrollTo(hashURL)

function smoothScrollTo(hashURL){
    if (hashURL != "" && hashURL.length > 1) {
        var hashText = hashURL.replace("#","")
        var targetMap = '[data-id="' + hashText + '"]'
        $("html, body").animate({
            scrollTop: $(targetMap).offset().top
        }, 500);

    }
}

Я пытаюсь добиться этого способом, описанным выше. Это почему-то не прокручивает до нужного раздела.