title: Vue.js How to set scroll position back to top?
body: <p>So whenever I click the "edit" button, a dialog pops up with a scrollbar where I can fill out information. But when I click "cancel" or "save" and then click that same "edit" button, the dialog pops up at the same scroll position. I would like to, every time when I click "edit" and the dialog opens up, be always at the top of the dialog page not where I left off last. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;!-- &lt;div class="text-xs-center" v-if="storeState.admin" lazy&gt; --&gt; 
        &lt;v-dialog 
        transition="dialog-bottom-transition" 
        scrollable 
        fullscreen 
        v-model="sheet" 
        v-if="storeState.admin"  
        lazy 
        persistent 
      &gt; 
        &lt;template v-slot:activator="{on}"&gt; 
          &lt;v-btn flat color="green" dark icon v-on="on"&gt; 
              &lt;v-icon&gt;edit&lt;/v-icon&gt;
          &lt;/v-btn&gt;
        &lt;/template&gt;
          &lt;div background-color="transparent" style="margin: auto auto 0 auto"&gt; 
            &lt;v-card px-5 max-width="800px"&gt; 
              &lt;v-card-title&gt;
                  ADD SCHOLARSHIP
              &lt;/v-card-title&gt;
  
          &lt;v-form v-model="addDisabled" validation ref="editForm"&gt;
              &lt;v-container&gt;
              &lt;v-layout wrap&gt;
                  &lt;v-flex
                  xs12
                  md4
                  &gt;
                  &lt;v-text-field
                      v-model="scholarship.title"
                      label="Scholarship name"
                      :counter="maxLength"
                      :rules="[maxLength_rules.max, minLength_rules.min]"
                      required
                  &gt;&lt;/v-text-field&gt;
                  &lt;/v-flex&gt;
  
                  &lt;v-flex xs12 md4&gt;
                  &lt;v-text-field
                      v-model="scholarship.faculty"
                      label="Faculty"
                      :counter="maxLength"
                      :rules="[maxLength_rules.max, minLength_rules.min]"
                      required
                  &gt;&lt;/v-text-field&gt;
                  &lt;/v-flex&gt;
  
                  &lt;v-flex xs12 md4&gt;
                  &lt;v-text-field
                      v-model="scholarship.dollarAmount"
                      label="Award amount"
                      required
                      :rules="[amount_rules.range, minLength_rules.min]"
                  &gt;&lt;/v-text-field&gt;
                  &lt;/v-flex&gt;
  
             &lt;v-flex ml-2 xs12 sm6 md4&gt;
              &lt;v-menu
                ref="menu2"
                v-model="menu2"
                :close-on-content-click="false"
                :nudge-right="40"
                :return-value.sync="availableDate"
                transition="scale-transition"
                offset-y
                full-width
                min-width="290px"
              &gt;
                &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-text-field
                    v-model="scholarship.available"
                    label="Date Available"
                    prepend-icon="event"
                    :rules="[minLength_rules.min]"
                    readonly
                    v-on="on"
                  &gt;&lt;/v-text-field&gt;
                &lt;/template&gt;
                &lt;v-date-picker v-model="availableDate" no-title scrollable&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn flat color="primary" @click="menu2 = false"&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn flat color="primary" @click="$refs.menu2.save(availableDate)"&gt;OK&lt;/v-btn&gt;
                &lt;/v-date-picker&gt;
              &lt;/v-menu&gt;
            &lt;/v-flex&gt;
  
  
            &lt;v-flex ml-2 xs12 sm6 md4&gt;
              &lt;v-menu
                ref="menu1"
                v-model="menu1"
                :close-on-content-click="false"
                :nudge-right="40"
                :return-value.sync="dueDate"
  
                transition="scale-transition"
                offset-y
                full-width
                min-width="290px"
              &gt;
                &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-text-field
                    v-model="scholarship.deadline"
                    label="Due Date"
                    prepend-icon="event"
                    readonly
                    :rules="[minLength_rules.min]"
                    v-on="on"
                  &gt;&lt;/v-text-field&gt;
                &lt;/template&gt;
                &lt;v-date-picker v-model="dueDate" no-title scrollable&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn flat color="primary" @click="menu1 = false"&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn flat color="primary" @click="$refs.menu1.save(dueDate)"&gt;OK&lt;/v-btn&gt;
                &lt;/v-date-picker&gt;
              &lt;/v-menu&gt;
            &lt;/v-flex&gt;
  
            &lt;v-flex xs12 md1&gt;
                  &lt;v-text-field
                      v-model="scholarship.requiredGpa"
                      label="Min GPA"
                      required
                      :rules="[gpa_rules.range, minLength_rules.min]"
                  &gt;&lt;/v-text-field&gt;
                  &lt;/v-flex&gt;
  
                  &lt;v-flex xs12&gt;
                      &lt;v-textarea
                      outline
                      height="400"
                      v-model = "scholarship.description"
                      label="Scholarship Description"
                      :rules="[minLength_rules.min]"
                      &gt;&lt;/v-textarea&gt;
                  &lt;/v-flex&gt;
  
  
              &lt;/v-layout&gt;
              &lt;/v-container&gt;
          &lt;/v-form&gt;
  
          &lt;v-card-actions&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
               &lt;v-btn  flat @click="sheet = false" &gt;cancel&lt;/v-btn&gt;
              &lt;v-btn color="primary" @click="updateFields(scholarship)"   :disabled="!addDisabled" flat &gt;SAVE&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
  
          &lt;/v-card&gt;
  
    &lt;/div&gt;
      &lt;/v-dialog&gt;
      &lt;!-- &lt;/div&gt; --&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import { store } from "../store.js";
  import EDITSCHOLARSHIP from '../graphql/updateScholarship.gql'
  
  
    export default {
      data: () =&gt; ({
         sheet: false,
        valid: false,
        dueDate: '',
        availableDate: '',
        storeState: store.state,
        addDisabled: true,
        menu1: '',
        menu2: '',
        gpa: '',
        title: '',
        faculty: '',
        amount: '',
        maxLength: 255,
        description: '',
        gpa_rules: {
                  range: v =&gt; v &lt;= 4.00 &amp;&amp; v &gt;= 0.00 &amp;&amp; v.length &lt;=4 || 'GPA may only be within 0.00 - 4.00',
              },
        amount_rules: {
                  range: v =&gt; v &lt;= 999999999.00 &amp;&amp; v &gt;= 0.00 || 'Amount must only contain numbers between 0.00 - 999999999.00',
              },
        maxLength_rules: {
           max: v =&gt; v.length &lt;= 255|| 'Max character length is 255',
        },
        minLength_rules: {
           min: v =&gt; v.length &gt; 0 || 'Required',
        }
  
      }),
      props: {
          scholarship: Object
      },
      methods: {
         validate () {
          if (this.$refs.editForm.validate()) {
            this.addDisabled = false
          }
        },
          editScholarship(scholarship) {
              if (this.$refs.editForm.validate()) {
                  this.$apollo.mutate({
                      mutation: EDITSCHOLARSHIP,
                      variables: {
                        id: scholarship.id,                
                        input: {
                            available: this.availableDate,
                            deadline: this.dueDate,
                            description: this.description,
                            dollarAmount: this.amount,
                            faculty: this.faculty,
                            requiredGpa: this.gpa,
                            title: scholarship.title,
                            visible: true,
                            
                        }
                      }
  
                  }).then( (data) =&gt; {
                      this.$emit('showSnackbar', 'Scholarship successfully updated', 'success')
                      this.sheet = false
  
                  }).catch( (error) =&gt; {
                      this.$emit('showSnackbar', 'Scholarship update failed', 'error')
                      //this.text = error
                      //this.color = "error"
                      //this.snackbar = true
                
                  })
                  
              }
            },
            updateFields (scholarship) {
              this.dueDate =  scholarship.deadline
              this.availableDate = scholarship.available
              this.gpa = scholarship.requiredGpa
              this.title =  scholarship.title
              this.faculty = scholarship.faculty
              this.amount = scholarship.dollarAmount
              this.description = scholarship.description
              this.editScholarship(scholarship)
            }
  
      } 
    }
  &lt;/script&gt; 
   
  &lt;style&gt; 
    .scroll { 
      overflow-y: auto; 
    } 
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>