$vuetify.goTo is not working in v-dialog fullscreen

user_11422199 0
Viewed 1617

I have been trying to put the back to top button in v-dialog using vuetify1.5 and I have used the following inbuilt method of vuetify that is $vuetify.goTo(0) but it seems to be not working any idea how i resolve this issue .

Or any other alternate way to put a back to top button in v-dialog fullscreen using vuetify.

For example :-

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            Open Dialog
          </v-btn>
        </template>
        <v-card>
         
          <v-toolbar dark color="primary">
            <v-btn icon dark @click="dialog = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Settings</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
              <v-btn dark text @click="dialog = false">Save</v-btn>
            </v-toolbar-items>
          </v-toolbar>
          <v-list three-line subheader>
            <v-subheader>User Controls</v-subheader>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Content filtering</v-list-item-title>
                <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Password</v-list-item-title>
                <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
          <v-divider></v-divider>
          <v-list three-line subheader>
            <v-subheader>General</v-subheader>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="notifications"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Notifications</v-list-item-title>
                <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="sound"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Sound</v-list-item-title>
                <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-action>
                <v-checkbox v-model="widgets"></v-checkbox>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Auto-add widgets</v-list-item-title>
                <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
              </v-list-item-content>
              
            </v-list-item>
          </v-list>
           <v-btn
            fab
            dark
            fixed
            bottom
            right
            color="primary"
            @click="$vuetify.goTo(0)"
          >
            <v-icon>keyboard_arrow_up</v-icon>
          </v-btn>
        </v-card>
      </v-dialog>
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false,
      notifications: false,
      sound: true,
      widgets: false,
    }
  },
})

vuetify.js vue.js
1 Answers

To achieve it, you can use scrollIntoView() to scroll on the top element in the modal.

Vuetify doesn't work on events inside the browser. It provides component for the building an application.

new Vue({
  el: "#app",
  methods: {
    scrollToTop: function() {
      document
    .getElementById("container")
    .scrollIntoView({ behavior: "smooth" });
    }
  }
})
#app {
  height: 850px;
}

.container {
  height: 800px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container" id="container">
    This is a long div
  </div>
  <button @click="scrollToTop()">
  scroll Top
  </button>
</div>

user_33673400
Related