title: Vue.js go back button browser detail back to lister position
body: <p>I have a test lister products and detail. Now when i go back with de backbutton in the browser is doesn't go back to the wright position.</p>
  
  <p>So if i scroll down in the lister , click product to detail and back it doesn't go to the position i clicked before.</p>
  
  <p>How can i achieve that?</p>
  
  <p>Main.js</p>
  
  <pre><code>Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>
  
  <p>Router: </p>
  
  <p>export default new Router({
          mode: 'history',
          scrollBehavior(to, from, savedPosition) {
              if (savedPosition) {
                  console.log(savedPosition)</p>
  
  <pre><code>            return savedPosition;
  
          } else {
              return {x: 0, y: 0};
          }
      },
      routes: [
          {
              path: '/',
              name: 'Home',
              component: Home
          },
          {
              path: '/products',
              name: 'Products',
              component: Products,
              props: true,
          },
          {
              path: '/product/:id',
              name: 'Productdetail',
              component: Productdetail,
              props: true
          }
      ]
  })
  </code></pre>
  
  <p>Lister: </p>
  
  <pre><code>&lt;template&gt;
      &lt;ul v-if="posts &amp;&amp; posts.length"&gt;
          &lt;li v-for="post of posts"  v-bind:id="post.id"&gt;
              &lt;p&gt;&lt;strong&gt;{{post.title}}&lt;/strong&gt;&lt;/p&gt;
              &lt;p&gt;{{post.body}}&lt;/p&gt;
              &lt;router-link :to="{path: '/product/'+post.id, replace: true}"&gt;{{post.title}}&lt;/router-link&gt;
  
              &lt;hr&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  
  import axios from 'axios';
  
  export default {
  
      name: 'Products',
      props: ["guid"],
      data() {
          return {
              posts: [],
              msg: 'Products'
          }
      },
      created() {
          axios.get('http://jsonplaceholder.typicode.com/posts')
              .then(response =&gt; {
                  // JSON responses are automatically parsed.
                  this.posts = response.data
              })
              .catch(e =&gt; {
                  this.errors.push(e)
              })
  
          //window.addEventListener('load', () =&gt; {
              setTimeout(() =&gt; {
                  var str = window.location.hash;
                  var res = str.replace("#bas", "");
  
                  var div = document.getElementById(res);
                  var rect = div.getBoundingClientRect();
  
                  $('html, body').animate({
                      scrollTop: rect.top
                  }, 500);
              }, 100)
          //})
      }
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vx0Fa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vx0Fa.jpg" alt="Lister"></a></p>
  
  <p>Detail :</p>
  
  <p><a href="https://i.stack.imgur.com/fw7bC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fw7bC.jpg" alt="Detail"></a></p>