[Vuejs]-Vue.js – Scroll to element not working on

by

3👍

✅

You might want to wait until its rendered on the page before trying to manipulate the Object with jQuery.

// next line adds it into the shadow dom
this.comments.push(response.data)
// next tick is called after rendering
this.$nextTick(() => {
  $('html, body').animate({scrollTop: $("#comment-" + response.data.id).offset().top}, 2000)
})

Also check out https://v2.vuejs.org/v2/api/#Vue-nextTick

👤user1497119

0👍

You can use vue-scrollto that gives you many options and compatibility, even for Nuxt.js

Given an url like http://localhost:9104/post/477#entry-1327 use a watch and a computed property to assure all data is rendered before scroll to the element.

  watch: {
    render (n) { // computed prop (bool) that tells me when all api data is already loaded
      const hash = location.hash.substr(1)
      if (!hash) return
      if (n) {
        this.$nextTick(() => {
          var el = document.getElementById(hash)
          this.$scrollTo(el)
        })
      }
    }
  },

Special ball

How to build a proper link with a hash

this.$router.push({ name: 'post', params: { postId }, hash: `#entry-${parentId}` })
👤Igor Parra

Leave a comment