title: Vue Router not scolling to correct hash location
body: <p>When clicking a link on the app, the Router does not scroll to the correct hash location given. But it DOES scoll. The scroll is always about 1 element too high on the page. For example, if my page is this:</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;div1&quot;&gt;Div1&lt;/div&gt;
      &lt;div id=&quot;div2&quot;&gt;Div2&lt;/div&gt;
      &lt;div id=&quot;div3&quot;&gt;Div3&lt;/div&gt;
      &lt;div id=&quot;div4&quot;&gt;Div4&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Then if I click a link that goes to hash &quot;div3&quot; it will scroll me so the top of div2. Only a very few select elements are scrolled to correctly. Is there a reason for this? Setting page margins?</p>
  <p>Router code:</p>
  <pre><code>const router = new VueRouter({
    routes,
    mode: 'history',
    base: &quot;/&quot;,
    scrollBehavior (to, from, savedPosition) {
      if (to.hash) {
          return {
            selector: to.hash,
            behavior: 'smooth',
          }
      } else {
          return { x: 0, y: 0 }
      }
    }
  })
  </code></pre>
  <p>Example of code that calls the hash routing:</p>
  <pre><code>if (item.title == &quot;Mission&quot;) {
      router.push({name: 'Explore', hash: '#mission-statement'});
  } else if (item.title == &quot;Our Story&quot;) {
      router.push({name: 'Explore', hash: '#our-story-container'});
  } else if (item.title == &quot;Shared principles&quot;) {
      router.push({name: 'Explore', hash: '#shared-principles-container'});
  } else if (item.title == &quot;Volunteer Opportunities&quot;) {
      router.push({name: 'Explore', hash: '#volunteer-container'});
  } else if (item.title == &quot;Gallery&quot;) {
      router.push({name: 'Explore', hash: '#galleries'});
  } else if (item.title == &quot;Living&quot;) {
      router.push({name: 'Explore', hash: '#living-container'});
  } else if (item.title == &quot;Contact Us&quot;) {
      router.push({name: 'Explore', hash: '#contact-us-container'});
  } else {
      router.push(&quot;/explore&quot;)
  }
  </code></pre>
  <p>SOLUTION:</p>
  <p>With the help of IVO GELOV's answer I was able to update the scroll behavior function with the code below and all works as expected.</p>
  <pre><code>scrollBehavior (to, from, savedPosition) {
      let position = {}
      if (to.hash) {
          position = {
            selector: to.hash,
            offset: { x: 0, y: 100 },
            behavior: 'smooth',
          }
      } else {
          position = { x: 0, y: 0 }
      }
      return new Promise((resolve) =&gt; {
        setTimeout(() =&gt; {
          resolve(position)
        }, 100)
      })
    }
  </code></pre>