Vue: scroll to a specific id does not work

user_3900177 0
Viewed 495

I am using the vueToScroll library to scroll to a specific id element created dynamically.

  <button  ref="replyBtn"
                         v-scroll-to="{
                     el: '#goToReply101',
                     duration: 800,
                     easing: 'easing',
                     offset: -50,
                     force: true
                 }" :id="this.goToReply">Scroll to the div

                </button>

The script below works as expected, but if I pass the value of the element dynamically does not work:

  <button  ref="replyBtn"
                     v-scroll-to="{
                 el: this.replyScroll//it returns '#gotToReply101'
                 duration: 800,
                 easing: 'easing',
                 offset: -50,
                 force: true
             }" :id="this.goToReply">Scroll to the div

            </button>

The value of the this.replyScroll variable changes according to the value of the clicked id.

vue.js
1 Answers

My data with "dynamic" id:

data() {
    return {
      element: '#element'
    }
  }

I assume that your issue lays in the dynamic id of an element that you are trying to scroll to.

So look at the other example:

<div class="test">
    <button id="button_el" v-scroll-to="{
                 el: element,
                 duration: 800,
                 easing: 'easing',
                 offset: -50,
                 force: true
             }">Scroll to #element</button>
    <div style="height: 200vh"></div>
    <div :id="element.substring(1)">
      Hi. I'm #element.
    </div>
  </div>

You can notice I removed the first character from the element data property. If your dynamic data is something like #element then if you wanted to use that data as dynamic id, you would need to subtract #.

Line element.substring(1) does exactly that.

user_61702330
Related