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

ngx-page-scroll

v13.0.0

Published

Convenience directive for animated scrolling functionality for angular written in pure typescript

Downloads

37,854

Readme

ngx-page-scroll npm version MIT license

Animated scrolling functionality for angular written in pure typescript with no additional dependencies

Build Status Known Vulnerabilities Codacy Badge

Features

  • flexible: trigger scroll animations after component load, server response, etc.
  • easy-to-use directive: scroll to an element referenced in the href-attribute (href="#mytarget) just by adding pageScroll directive
  • customizable: adjust duration, offset or whether scrolling stops if the user interrupts (read more)
  • use custom easing functions to calculate the scroll position over time
  • works across routes (scrolls to target element as soon as the routing has finished) and in both directions (horizontal/vertical)

Table of contents

Version compatibility

Install later versions in case your app is not running the very latest angular version.

| ngx-page-scroll/ngx-page-scroll-core version | compatible angular version | Documentation | | -------------------------------------------- | -------------------------- | -------------------------------------------------------------------------- | | v12.x | v17 | README | | v11.x | v16 | README | | v10.x | v15 | README| | v9.x | v14 | README | | v8.x | v13 | README | | v7.x | v12, v11, v10, v9, v8 | README | | v6.x | v8, v7 | README | | v5.x | v6 | README | | v4.x | v5, v4 | README |

Service

Setup

First you need to install the core npm module:

npm install ngx-page-scroll-core --save

Then add the NgxPageScrollModule to the imports array of your application module:

import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';

@NgModule({
    imports: [
        /* Other imports here */
        NgxPageScrollCoreModule
        ]
})
export class AppModule {
}

Usage

Using the PageScrollService#scroll method you may trigger scroll animations. Provide an options object that provides a reference to the document and the scroll target. Additional properties are optional.

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { PageScrollService } from 'ngx-page-scroll-core';

export class MyComponent {
 constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {
 }

 ngOnInit(): void {
  this.pageScrollService.scroll({
    document: this.document,
    scrollTarget: '.theEnd',
  });
 }
}

Note: The scroll() method is a shorthand from creating a PageScrollInstance (an object encapsulating all information relevant for performing a scroll animation) using PageScrollService#create and starting it using the PageScrollService#start method.

Configuration

When importing the PageScrollCoreModule one can provide option overrides:

imports: [
  ...
  NgxPageScrollCoreModule.forRoot({duration: 2500, easingLogic: ...}),
]

Check the PageScrollConfig interface for possible options and their impact. The default values may be found in the defaultPageScrollConfig object.

Directive

For ease of use a directive pageScroll exists, which allows you to quickly add scroll animations to your angular app by adding a property to your existing HTML a-tags. It can also work cross-routes, meaning it will start the scroll animation after the target route has been loaded. It utilizes the ngx-page-scroll-core module for that, thus requires it as a peer dependency.

Setup

First you need to install the directive npm module:

npm install ngx-page-scroll --save

Then add the NgxPageScrollModule to the imports array of your application module:

import { NgxPageScrollModule } from 'ngx-page-scroll';

@NgModule({
    imports: [
        /* Other imports here */
        NgxPageScrollModule
        ]
})
export class AppModule {
}

Usage

In your template you may add the pageScroll attribute to elements with an href attribute pointing towards an id on the same page (e.g. #theId). The onClick event will be interrupted and the scroll animation starts. Alternatively you may set the optional pageScrollTarget property to a valid css selector to specify the target element to scroll to.


@Component({
   ...
   template: `...
        <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
        <!-- Further content here -->
        <h2 id="awesomePart">This is where the awesome happens</h2>
   ...`,
})
export class MyComponent {
}

Directive API

Additional attributes may be set on an DOM element using the pageScroll directive for customization. They take precedence over the default settings specified in PageScrollConfig class. Thereby it is possible to have all page scroll-animations last e.g. 2 seconds, but a specific one should be performed with a custom easing function and a duration of only 1 second.

PageScroll properties

| Attribute | Type | Default | Description | | ------------------------- | ----------- | ------------ |-------------- | | pageScroll | | | Attribute adding scroll-animation behavior when the click-event happens on the element. | | pageScrollTarget | string | | Optional attribute to set the element that should be scrolled to. Takes precedence over the ´href´-value | | pageScrollHorizontal | boolean | false | Whether the scroll should happen in vertical direction (false, default) or horizontal (true). | | pageScrollOffset | number | 0 | Pixels to offset from the top of the element when scrolling to (positive value = scrolling will stop given pixels atop the target element). | | pageScrollDuration | number | 1250 | Duration in milliseconds the whole scroll-animation should last. | | pageScrollSpeed | number | - | Speed in Pixel/Second the animation should take. Only applied if no duration is set. | | pageScrollInView | boolean | true | Whether the scroll animation should happen even when the scroll target is already inside the view port (true). Set to false to skip scroll animation if target is already in view. | | pageScrollInterruptible | boolean | true | Whether the scroll animation should stop if the user interferes with it (true) or not (false). | | pageScrollAdjustHash | boolean | false | Whether the routes hash/fragment should be updated to reflect to section that has been scrolled to | | pageScrollEasing | EasingLogic | linearEasing | Easing method to be used while calculating the scroll position over time (default is linear easing). |

PageScroll events

| Event | Type | Description | | --------------------- | ------- | ------------- | | pageScrollFinish | boolean | Fired when the scroll-animation stops. Emits a boolean value which indicates whether the scroll animation finished successfully and reached its target (true) or not (false). Possible reasons for false: target not found or interrupted due to another scroll animation starting or user interaction. |

Example

The following example will check whether the route Home is currently loaded. If this is true, the scroll-animation will be performed with the default properties. If a different route is loaded, a subscription for route changes will be made and the scroll-animation will be performed as soon as the new route is loaded.

 <a pageScroll [routerLink]="['Home']" href="#myanchor">Go there</a>

Overriding all possible properties. doSmth() and myEasing are defined in the component

 <a pageScroll [pageScrollOffset]="0" [pageScrollDuration]="2000" [pageScrollEasing]="myEasing" [pageScrollInterruptible]="false" (pageScrollFinish)="doSmth($event)" href="#theanchor">Visit</a>
    public myEasing: EasingLogic = (t: number, b: number, c: number, d: number): number => {
      // easeInOutExpo easing
      if (t === 0) {
        return b;
      }
      if (t === d) {
        return b + c;
      }
      if ((t /= d / 2) < 1) {
        return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
      }

      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }

    doSmth(reachedTarget: boolean): void {
        if (reachedTarget) {
            console.log('Yeah, we reached our destination');
        } else {
            console.log('Ohoh, something interrupted us');
        }
    }

FAQ and common problems

Please have a look at the wiki section of the GitHub repo at https://github.com/Nolanus/ngx-page-scroll/wiki/FAQ for frequent questions and problems.

License

MIT