npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-scroll-to

v0.6.5

Published

Animated scrolling to a specified id.

Downloads

4,394

Readme

ember-scroll-to

Animated vertical scrolling to a specified id.

Installation

From within your ember-cli project directory:

ember install ember-scroll-to

The component

The {{scroll-to}} creates an <a> element that, when clicked, scrolls to the specified selector.

In your template:

{{scroll-to href='#faq' label='FAQ'}}

You can also use the block form:

{{#scroll-to href='#faq'}}
  FAQ
{{/scroll-to}}

If you want to perform some action after scroll:

{{scroll-to href='#faq' afterScroll='customAction'}}

The component accepts the following options

  • href -- (required) a selector of an element to scroll to on click.
  • label -- text to display on the component. Ignored when used in a block form.
  • duration -- number of milliseconds for the transition to occur over. Default is 750ms.
  • easing -- the jQuery animate transition to use. Default is 'swing'. With a standard setup, you could also use 'linear'. If you want more, check out jQuery UI.
  • offset -- An optional offset. The most common use case for this is if you have a fixed header that you need to account for.

Example usage with all options at once:

{{scroll-to
  href='#faq'
  label='FAQ'
  duration=1000
  easing='linear'
  offset=-60
}}

Service

You can also invoke scrolling programmatically. To do so, inject the scroller service into your object:

scroller: Ember.inject.service()

Then you can use the scrollVertical method on it:

this.get('scroller').scrollVertical(target, options);

target can be anything that jQuery accepts (selector, element, jQuery collection...).

options is a hash with any of the following key-value pairs (all optional):

  • offset
  • duration
  • easing
  • complete -- a callback to execute once the scrolling animation is complete.

The method returns a Promise that will resolve as soon as the animation has completed.

Configuration

Some frameworks - like Google's Material Design Lite - will use a custom DOM structure to wrap the main content (e.g. for facilitating responsive design, modal overlays). For use in such environments, you'll want to override the default scrollable element (html, body) with the container element that should be used by the service to set the vertical scroll position. To do so, extend the service:

// app/services/scroller.js
import Ember from 'ember';
import Scroller from 'ember-scroll-to/services/scroller';

export default Scroller.extend({
  scrollable: Ember.computed(function() {
    return Ember.$('main.mdl-layout__content');
  })
});

Where in this example main.mdl-layout__content is the content container of the page for Material Design Lite. Inspect your DOM to find the main element if scrolling is not working.