ngx-scroll-to

Scroll to any element to enhance scroll-based features in you app.
Works for Angular 4+, both AoT and SSR. No dependencies.

Type	Badge
GitHub Release
NPM Version
Dependencies
Dev Dependencies
Peer Dependencies
Optional Dependencies
Licence

Current Angular Version

Installation

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

Setup

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

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

Basic Usage

my-component.html

<button [ngx-scroll-to]="'destination">Go to destination</button>

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

Advanced Usage

my-component.ts

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

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

  public ngxScrollToDestination: string;
  public ngxScrollToEvent: ScrollToEvent;
  public ngxScrollToDuration: number;
  public ngxScrollToEasing: ScrollToAnimationEasing;
  public ngxScrollToOffset: number;
  public 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)

  }

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

my-component.html

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

<button 
  [ngx-scroll-to]="ngxScrollToDestination"
  [ngx-scroll-to-event]="ngxScrollToEvent"
  [ngx-scroll-to-duration]="ngxScrollToDuration"
  [ngx-scroll-to-easing]="ngxScrollToEasing"
  [ngx-scroll-to-offset]="ngxScrollToOffset"
  [ngx-scroll-to-offset-map]="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>

Attributes Map

Attribue Map Details

[ngx-scroll-to]

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 examples. This enables you to dynamically set the string value based on a class property of your Component.

[ngx-scroll-to-event]

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

[ngx-scroll-to-duration]

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

[ngx-scroll-to-easing]

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

[ngx-scroll-to-offset]

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

[ngx-scroll-to-offset-map]

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 the this value is in pixels.

License

MIT