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

@paulvmoreau/ngx-scroll-to

v11.0.5

Published

A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. This is a fork from @nicky-lenaers' scroll to module that supports angular 10 and angular 11

Downloads

66

Readme

Current Angular Version

npm version

Installation

Angular 8 and 9

$ npm install @nicky-lenaers/ngx-scroll-to

Angular 7

$ npm install @nicky-lenaers/ngx-scroll-to@'2'

Angular 6

$ npm install @nicky-lenaers/ngx-scroll-to@'1'

Angular <= 5.x

$ npm install @nicky-lenaers/ngx-scroll-to@'<1'

Setup

...
import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
...

@NgModule({
  imports: [
    ...
    ScrollToModule.forRoot()
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic Usage - Directive to Target

my.component.html

<!-- Works for including '#' -->
<button [ngxScrollTo]="'#destination'">Go to destination</button>

<!-- Works for excluding '#' -->
<button [ngxScrollTo]="'destination'">Go to destination</button>

<!-- Works for Angular ElementRef -->
<button [ngxScrollTo]="destinationRef">Go to destination</button>

<div id="destination" #destinationRef>
  You've reached your destination.
</div>

Basic Usage - Directive to Offset Only

Besides scrolling to a specific element, it is also possible to scroll a given offset only. This can be achieved by an empty target and an offset:

my.component.html

<button 
  ngxScrollTo
  [ngxScrollToOffset]="200">
  Go down 200 pixels
</button>

Basic Usage - Service to Target

my.component.html

<button (click)="triggerScrollTo()">Go to destination</button>

<div id="destination">
  You've reached your destination.
</div>

my.service.ts

import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';

@Injectable()
export class MyService {

  constructor(private scrollToService: ScrollToService) { }

  triggerScrollTo() {
    
    const config: ScrollToConfigOptions = {
      target: 'destination'
    };

    this.scrollToService.scrollTo(config);
  }
}

Basic Usage - Service to Offset Only

Just like with the Directive, the Service can be used to scroll to an offset only instead of a given target element:

my.component.html

<button (click)="triggerScrollToOffsetOnly(200)">Go down 200 pixels</button>

my.service.ts

import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';

@Injectable()
export class MyService {

  constructor(private scrollToService: ScrollToService) { }

  triggerScrollToOffsetOnly(offset: number = 0) {
    
    const config: ScrollToConfigOptions = {
      offset
    };

    this.scrollToService.scrollTo(config);
  }
}

Advanced Usage - Directive

my.component.ts

import { ScrollToAnimationEasing, ScrollToEvent, ScrollToOffsetMap } from '@nicky-lenaers/ngx-scroll-to';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html'
})
export class MyComponent {

  ngxScrollToDestination: string;
  ngxScrollToEvent: ScrollToEvent;
  ngxScrollToDuration: number;
  ngxScrollToEasing: ScrollToAnimationEasing;
  ngxScrollToOffset: number;
  ngxScrollToOffsetMap: ScrollToOffsetMap;

  constructor() {

    this.ngxScrollToDestination = 'destination-1';
    this.ngxScrollToEvent = 'mouseenter';
    this.ngxScrollToDuration = 1500;
    this.ngxScrollToEasing = 'easeOutElastic';
    this.ngxScrollToOffset = 300;
    this.ngxScrollToOffsetMap = new Map();
    this.ngxScrollToOffsetMap
      .set(480, 100)
      .set(768, 200)
      .set(1240, 300)
      .set(1920, 400)

  }

  toggleDestination() {
    this.ngxScrollToDestination = this.ngxScrollToDestination === 'destination-1' ? 'destination-2' : 'destination-1';
  }
}

my.component.html

<button (click)="toggleDestination()">Toggle Destination</button>

<button 
  [ngxScrollTo]="ngxScrollToDestination"
  [ngxScrollToEvent]="ngxScrollToEvent"
  [ngxScrollToDuration]="ngxScrollToDuration"
  [ngxScrollToEasing]="ngxScrollToEasing"
  [ngxScrollToOffset]="ngxScrollToOffset"
  [ngxScrollToOffsetMap]="ngxScrollToOffsetMap">
  Go to destination
</button>

<div id="destination-1">
  You've reached your first destination
</div>

<div id="destination-2">
  You've reached your second destination
</div>

Advanced Usage - Service

my.component.html

<button (click)="triggerScrollTo()">Go to destination</button>

<div id="custom-container">
  <div id="destination">
    You've reached your destination.
  </div>
</div>

my.service.ts

import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';

@Injectable()
export class MyService {

  constructor(private scrollToService: ScrollToService) { }

  triggerScrollTo() {
    
    /**
     * @see NOTE:1
     */
    const config: ScrollToConfigOptions = {
      container: 'custom-container',
      target: 'destination',
      duration: 650,
      easing: 'easeOutElastic',
      offset: 20
    };

    this.scrollToService.scrollTo(config);
  }
}

NOTE:1

The container property is an optional property. By default, ngxScrollTo searches for the first scrollable parent HTMLElement with respect to the specified target. This should suffice in most cases. However, if multiple scrollable parents reside in the DOM tree, you have the degree of freedom the specify a specific container by using the container property, as used in the above example.

Directive Attributes Map

Error Handling

In some occasions, one might misspell a target or container selector string. Even though ngx-scoll-to will not be able to initiate the scrolling animation, you can catch the internally generated error and handle it as you please on the Observable chain returned from the scrollTo method.

faulty.service.ts

import { Injectable } from '@angular/core';
import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';

@Injectable()
export class FaultyService {

  constructor(private scrollToService: ScrollToService) { }

  triggerScrollTo() {
    
    this.scrollToService
      .scrollTo({
        target: 'faulty-id'
      })
      .subscribe(
        value => { console.log(value) },
        err => console.error(err) // Error is caught and logged instead of thrown
      );
  }
}

Directive Attribute Map Details

[ngxScrollTo]

This value specifies the ID of the HTML Element to scroll to. Note the outer double quotes "" and the inner single quotes '' in the above example(s). This enables you to dynamically set the string value based on a class property of your Component.

[ngxScrollToEvent]

This value controls to event on which to trigger the scroll animation. Allowed values are:

  • click
  • mouseenter
  • mouseover
  • mousedown
  • mouseup
  • dblclick
  • contextmenu
  • wheel
  • mouseleave
  • mouseout

[ngxScrollToDuration]

This value controls to duration of your scroll animation. Note that this value is in milliseconds.

[ngxScrollToEasing]

This value controls a named easing logic function to control your animation easing. Allowed values are:

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeOutElastic

[ngxScrollToOffset]

This value controls the offset with respect to the top of the destination HTML element. Note that this value is in pixels.

[ngxScrollToOffsetMap]

This value allows you to control dynamic offsets based on the width of the device screen. The Map get's iterated over internally in a sequential fashion, meaning you need to supply key values in the order from low to high. The key of the Map defines the width treshold. The value of the Map defines the offset. Note that this value is in pixels.

Contributing

Please see Contributing Guidelines.

Code of Conduct

Please see Code of Conduct.

License

MIT