Skip to content

Latest commit

 

History

History
68 lines (54 loc) · 2.89 KB

README.md

File metadata and controls

68 lines (54 loc) · 2.89 KB
Raw

Ember-scroll-to-top

Build Status Ember Observer Score Ember component addon to allow scrolling to top of the page.

Installation

ember install ember-scroll-to-top

How to use

To use this addon, you can wrap you customize markup for the real control element or simply put the component in your template directly (The default control would be <button>)

  • For option 1: wrap customize markup (recommended), you have the abilities to customize your control element such as class name
{{#scroll-top
  toggleWhenScroll=true
  effectToToggle='fade'
  onScroll=(action 'onScroll')
  onScrollToTop=(action 'onScrollToTop')
  animate='400' as |clickAction|}}
  <input type='button' onclick={{clickAction}} value='Scroll to Top'/>
{{/scroll-top}}

The action of scroll-to-top is yielded from the component, so you can put that on your control element.

  • For option 2: non-block component structure, default control element will be <button>
{{scroll-top
  toggleWhenScroll=true
  effectToToggle='fade'
  onScroll=(action 'onScroll')
  onScrollToTop=(action 'onScrollToTop')
  animate='400'}}

####Options

Option Name Description Type Default Value
toggleWhenScroll Show when scroll down to a specific position, and hide on top of the page Boolean false
effectToToggle The effect to show/hide element, if toggleWhenScroll is true. Current support 'default' and 'fade' String 'default'
animate Animation value of scrolling to top, e.g. animate='500' String false

####Callbacks | Callback | Description |
|---------------|---------------------------------------------------|---|---|---| | onScroll | Callback when window is being scrolled | | onScrollToTop | Callback when window has been scrolled to the top |

Running

  • git clone <repository-url> this repository
  • cd ember-scroll-to-top
  • npm install
  • bower install
  • ember serve
  • Visit your app at http://localhost:4200.

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.