A little framework7 plugin to give users a button to scroll up
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
demo Dep fix Feb 9, 2018
src Added comment to css file Feb 23, 2018
.gitignore Clean-up Jan 6, 2018
README.md Update README.md Feb 23, 2018
demo.gif Added demo gif Feb 9, 2018
package.json Ported to npm package Feb 9, 2018
screenshot.jpg New screenshot Jan 26, 2018


Upscroller Plugin for Framework7

This plugin creates a blue button which slides in from the top of the screen when the user has scrolled down. When clicked or sliding back up manually, the button disappears.


Live demo

Check it here http://www.timo-ernst.net/misc/upscrollerdemo/


npm install f7-upscroller

How to use

import upscroller from 'f7-upscroller';


var app = new Framework7({
  root: '#app',
  name: 'Upscroller demo',
  theme: 'ios',
  upscroller: {
    // text: 'Go down',
    // ignorePages: ['about'],

var mainView = app.views.create('.view-main');

The default label of the button is 'Go up'. If you'd like to change the button label, simply declare it during your app's initialization.

Ignore pages

The Upscroller Plugin is included in every page you enter. If you want to ignore the upscroller plugin in some pages, you may now use the following parameter:

var app = new Framework7({
  root: '#app', // Your app root id
  theme: 'ios',
  upscroller: {
    ignorePages: ['about'], // Add pages to ignore here


Open demo/dist/index.html in your browser.

Demo source code

Check demo/src/index.js

F7 compatibility

F7 version Compatible?
1.x No (For older version with compatibility of F7 v1 check here.)
2.x (V2) Yes

That's it. Happy coding! :-)

Made with <3 by www.timo-ernst.net

My YouTube channel about Framework7: http://youtube.com/xvalmar