Back to Top     

This is actually a directive and not a component. It allows to make visible any DOM elements (like buttons) which appear after a certain scroll offset. When clicked/tapped they take the user to the top of the page.

Installation

Edit /quasar.conf.js:

framework: {
  directives: ['BackToTop']
}

Basic Usage

<!-- Bare bones example -->
<q-btn
  v-back-to-top
  round
  color="teal-5"
  class="fixed-bottom-right"
  style="margin: 0 15px 15px 0"
>
  <q-icon name="keyboard_arrow_up" />
</q-btn>

<!--
  With animation, custom scroll offset (after which button is visible)
  and animation duration.

  Use "animate-*" CSS classes for effects when buttons/elements
  become visible. In this case, we'll use "animate-pop":
-->
<q-btn
  v-back-to-top.animate="{offset: 500, duration: 200}"
  round
  color="primary"
  class="fixed-bottom-right animate-pop"
  style="margin: 0 15px 15px 0"
>
  <q-icon name="keyboard_arrow_up" />
</q-btn>

When using a Layout then you can take advantage of the Fixed Positioning on Layout component too and wrap your element with it, like this:

<q-page-sticky position="top-right" :offset="[18, 18]">
  <q-btn
    v-back-to-top
    round
    color="primary"
    @click="alert"
    icon="keyboard_arrow_up"
  />
</q-page-sticky>

Vue Modifiers

Vue Modifier Description
animate Adds scrolling animation

Vue Binding Value

You can use the binding value in 3 forms:

  1. No value. Defaults will apply.
  2. As a Number. This will be the scroll offset after which DOM element will be made visible.
  3. As an Object with offset and/or duration as props. Duration is ignored if animate modifier is not used.

Determining Scrolling Container

Please read here about how Quasar determines the container to attach scrolling events to.

Scroll Fire Scrolling Utils
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub