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/

Install

npm install f7-upscroller

How to use

import upscroller from 'f7-upscroller';

Framework7.use(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
  },
});

Example

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

Demo source code

Check demo/src/index.js

F7 compatibility

That's it. Happy coding! :-)

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

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