Eutrepe/ngx-eutrepe-scroll-to

NgxEutrepeScrollTo

• Directive and Servece for Angular to scroll to section
• Based on: pawelgrzybek.com
• Angular 10 version
• For Angular 4 use version 4.x.x, GIT branch: angular-4 (Check README.md on this branch)
• For Angular 8 use version 8.x.x, GIT branch: angular-8 (Check README.md on this branch)

Installation

npm i --save @eutrepe/scroll-to

Usage

1) Register the NgxEutrepeScrollToModule in your app module.

import { NgxEutrepeScrollToModule } from '@eutrepe/scroll-to'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgxEutrepeScrollToModule } from '@eutrepe/scroll-to';

import { AppComponent } from './app.component';
import { WINDOW_SCROLL_TO } from '@eutrepe/scroll-to'; // not required (this is also happening in the background of the plugin)

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  NgxEutrepeScrollToModule
],
providers: [
  {provide: WINDOW_SCROLL_TO, useValue: window} // not required (this is also happening in the background of the plugin)
],
bootstrap: [AppComponent]
})
export class AppModule { }

2) Use the directive (ngxEutrepeScrollTo)

Basic

<button [ngxEutrepeScrollTo]="'#target'">Scroll To</button>

<div id="target"></div>

or

<button [ngxEutrepeScrollTo]="1000">Scroll To</button>

Advanced

<button
    [ngxEutrepeScrollTo]="'#target'"
    [eutrepeScrollToEasing]="'linear'"
    [eutrepeScrollToDuration]="3000"
    [eutrepeScrollToOffset]="100"
    [eutrepeOnStartScrolling]="onStart"
    [eutrepeOnEndScrolling]="onEnd"
    [eutrepeOnStartScrollingParams]="['some_text', 1, true]"
    [eutrepeOnEndScrollingParams]="[100, false]"
    [eutrepeOnBreakScrolling]="onBreak.bind(this)"
    [eutrepeOnBreakScrollingParams]="['Eutrepe']"
>Scroll To</button>
<!-- Use .bind(this) for callbacks if you want use scoped variables -->

<div id="target"></div>

  onStart(arg1, arg2, arg3) {
    console.log(arg1); // 'some_text'
    console.log(arg2); // 1
    console.log(arg3); // true
    console.log('start scrolling');
  }

  onEnd(arg1, arg2) {
    console.log(arg1); // 100
    console.log(arg2); // false
    console.log('finish scrolling');
  }

  onBreak(arg1) {
    console.log(arg1);  // Eutrepe
  }

3) Use the service (NgxEutrepeScrollToService)

<h2 #test>This is target element</h2>

    import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
    import { NgxEutrepeScrollToService } from '@eutrepe/scroll-to';

    @Component({
    selector: 'eutrepe-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements AfterViewInit {

    @ViewChild("test", {read: ElementRef, static: true}) test: ElementRef;

    constructor(private ngxEutrepeScrollToService: NgxEutrepeScrollToService){}

    ngAfterViewInit() {
        this.ngxEutrepeScrollToService.scrollTo(this.test.nativeElement, {
        easing: 'linear',
        duration: 3000,
        offset: 100,
        onStart: this.onStart,
        onEnd: this.onEnd,
        onStartParams: ['some_text', 1, true],
        onEndParams: [100, false],
        onBreakParams: ['Eutrepe'],
        onBreak: this.onBreak
        });
    }


    onStart(arg1, arg2, arg3) {
      console.log(arg1); // 'some_text'
      console.log(arg2); // 1
      console.log(arg3); // true
      console.log('start scrolling');
    }

    onEnd(arg1, arg2) {
      console.log(arg1); // 100
      console.log(arg2); // false
      console.log('finish scrolling');
    }

    onBreak(arg1) {
      console.log(arg1);  // Eutrepe
    }
  }

API

Directive:

import { NgxEutrepeScrollToModule } from '@eutrepe/scroll-to'

Input	Type	Required	Description
[ngxEutrepeScrollTo]	string or number	YES	Target selector name or number pixels to scroll
[eutrepeScrollToEasing]	string	Optional, default: 'easeInOutQuad'	Easing type (more info in EASING section)
[eutrepeScrollToDuration]	number	Optional, default: 1000	Easing time in milliseconds
[eutrepeScrollToOffset]	number	Optional, default: 0	Offset in px to target element
[eutrepeOnStartScrolling]	Function	Optional, default: null	The function is started immediately after the start of scrolling
[eutrepeOnEndScrolling]	Function	Optional, default: null	The function is started immediately after the end of scrolling
[eutrepeOnStartScrollingParams]	Array	undefined	Optional, default: []
[eutrepeOnEndScrollingParams]	Array	undefined	Optional, default: []
[eutrepeOnBreakScrolling]	Function	Optional, default: null	The function is when user break scrolling (second click, resize, scroll)
[eutrepeOnBreakScrollingParams]	Array	undefined	Optional, default: []

Service:

import { NgxEutrepeScrollToService } from '@eutrepe/scroll-to'

scrollTo(target: HTMLElement | number, config?: IScrollToConfig) : void

export interface IScrollToConfig {
  duration?: number;
  offset?: number;
  easing?: string;
  onEnd?: Function;
  onStart?: Function;
  onStartParams?: Array<any> | undefined;
  onEndParams?: Array<any> | undefined;
  onBreak?: Function;
  onBreakParams?: Array<any> | undefined;
}

Easing:

Name	Function
linear	return t;
easeInQuad	return t * t;
easeOutQuad	return t * (2 - t);
easeInOutQuad	return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
easeInCubic	return t * t * t;
easeOutCubic	return (--t) * t * t + 1;
easeInOutCubic	return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
easeInQuart	return t * t * t * t;
easeOutQuart	return 1 - (--t) * t * t * t;
easeInOutQuart	return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
easeInQuint	return t * t * t * t * t;
easeOutQuint	return 1 + (--t) * t * t * t * t;
easeInOutQuint	return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;