https://github.com/valnub/framework7-upscroller-plugin

A little framework7 plugin to give users a button to scroll up
https://github.com/valnub/framework7-upscroller-plugin

css framework7 html javascript plugin

Last synced: 30 days ago
JSON representation

A little framework7 plugin to give users a button to scroll up

• Host: GitHub
• URL: https://github.com/valnub/framework7-upscroller-plugin
• Owner: valnub
• Created: 2015-06-06T23:14:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T13:36:10.000Z (almost 7 years ago)
• Last Synced: 2024-11-21T08:45:52.171Z (about 1 month ago)
• Topics: css, framework7, html, javascript, plugin
• Language: JavaScript
• Homepage:
• Size: 3.78 MB
• Stars: 32
• Watchers: 3
• Forks: 16
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://raw.githubusercontent.com/valnub/Framework7-Upscroller-Plugin/master/demo.gif)

## Live demo

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

## Install

```

npm install f7-upscroller

```

## How to use

```javascript

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:

```javascript

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](https://github.com/valnub/Framework7-Upscroller-Plugin/releases/tag/1.0).) |

| 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