Skip to content
Animated scrolling to a specified id.
JavaScript HTML CSS
Branch: gen-1
Clone or download
Pull request Compare This branch is 16 commits ahead, 39 commits behind ragnarpeterson:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG.md
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-scroll-to-mk2

Travis npm Ember Observer Score 1.13+

A link/button component that performs scrolling to given selector.

Current implementation uses jQuery for animated scrolling (animation is optional).

See: demo, API docs.

Reimplementation of ember-scroll-to

This project is a reimplementation of ember-scroll-to by @jasonkriss and other contributors.

Differences:

  • ember-scroll-to-mk2 only provides the component, not the service.
  • Scrolls to any selector, not just id.
  • Allows specifying which container to scroll.
  • Optional caching of container and target elements -- disable caching if your app has them disappearing/reappearing.

Installation

ember install ember-scroll-to-mk2

Usage

Inline form:

{{scroll-to
  target = "#foo"
  label  = "Scroll to #foo"
}}

Block form:

{{#scroll-to
  target = "#foo"
}}
  <strong>Scroll to #foo"</strong>
{{/scroll-to}}

Arguments

Argument Type Default value Description
label undefined/String undefined If no block is provided, this is used as link/button label.
target String <required> Selector of the element to scroll to
scrollable String 'html, body' Selector of the element being scrolled. In test env, '#ember-testing-container' is used.
duration undefined/Number undefined Animation duration in milliseconds. When undefined, jQuery's default is used.
easing undefined/String undefined Animation easing name. When undefined, jQuery's default is used.
offset Number 0 Lets you scroll slightly above or below the target.
cacheTarget Boolean true Whether to cache the target element.
cacheScrollable Boolean true Whether to cache the scrollable element.
afterScroll undefined/Action undefined Ember Action to invoke every time scrolling animation completes.
shouldAccountForScrollable Boolean false if scrollable is not default Whether to account for scollable's offset and scolllTop when calculating scolllTop.

License

This software is free to use under the MIT license. See the LICENSE file for license text and copyright information.

Includes fragments of code borrowed from jasonkriss/ember-scroll-to.

You can’t perform that action at this time.