# ember-scroll-to-top

> Ember addon for scrolling page to top

Latest version **0.1.0** (published 2016-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-scroll-to-top
pnpm add ember-scroll-to-top
yarn add ember-scroll-to-top
bun add ember-scroll-to-top
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2016-11-05 |
| First published | 2016-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.12.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | zhujy8833 |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/ember-scroll-to-top
- Repository: https://github.com/zhujy8833/ember-scroll-to-top
- Homepage: https://github.com/zhujy8833/ember-scroll-to-top#readme
- Issues: https://github.com/zhujy8833/ember-scroll-to-top/issues
- npm.io page: https://npm.io/package/ember-scroll-to-top

## Dependencies (1)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^5.1.7

## Recent versions

- 0.1.0 (latest) — 2016-11-05

## README

# Ember-scroll-to-top
[![Build Status](https://travis-ci.com/zhujy8833/ember-scroll-to-top.svg?token=AbecQTdzwsRokttzSyiy&branch=master)](https://travis-ci.com/zhujy8833/ember-scroll-to-top)

Ember component addon to allow scrolling to top of the page.
## Installation

* `git clone <repository-url>` this repository
* `cd ember-scroll-to-top`
* `npm install`
* `bower install`

## 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

* `ember serve`
* Visit your app at [http://localhost:4200](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/](http://ember-cli.com/).

---
_Source: https://npm.io/package/ember-scroll-to-top · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._