Awesome Open Source
Awesome Open Source

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.

Screenshot

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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,145
html (10,729
css (7,209
plugin (745
framework7 (18

Find Open Source By Browsing 7,000 Topics Across 59 Categories