base on Angular Smooth Scroll
An Angular 10 library to scroll smoothly to an element with easing.
- Uses standard angular package structure.
- Exposes an angular module to completely match with angular projects.
- Exposes a service that scrolls the window to an element's location.
- Provides two directives that enable smooth scrolling to elements.
- Clean: No classes are added, no jQuery is required, no CSS files or configuration is needed.
- Scrolling within a custom container added in 2.0.0
- Strongly typed
Install the package:
npm i ngx-grease-scroll
Import it in your module:
import { GreaseScrollModule } from "ngx-grease-scroll";
@NgModule({
imports: [
GreaseScrollModule
]
})
@Component({
selector: 'app-section-top-bar',
templateUrl: './section-top-bar.component.html',
styleUrls: ['./section-top-bar.component.scss']
})
export class SectionTopBarComponent
{
constructor(protected _greaseScrollService: GreaseScrollService,
@Inject(DOCUMENT) protected _document: Document)
{
}
scrollToTop()
{
this._greaseScrollService.scrollTo(this._document.body)
}
}
This module provides two directives:
Attribute. Scrolls the window to this element, optionally validating the expression inside scroll-if.
Example:
// Basic - The window will scroll to this element's position when compiling this directive
<div scroll></div>
// With options
<div scroll
[duration]="800"
[easing]="easeInQuint"
[offset]="120"
[middleAlign]="true"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction">
{{...}}
</div>
// Inside a custom container
<div scroll
[duration]="800"
[easing]="easeInQuint"
[offset]="120"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction"
[containerId]="container-id">
{{...}}
</div>
// With condition
<div scroll
[scrollIf]="myExpression">
{{...}}
</div>
// Inside ng-repeat
<div scroll
[scrollIf]="myExpression"
[duration]="2500">
{{...}}
</div>
####scrollTo:
Attribute. Scrolls the window to the specified element ID when clicking this element.
Example:
// Basic
<a href="#"
[scrollTo]="'my-element-3'">
Click me!
</a>
// Custom containers
<a href="#"
[scrollTo]="'my-element-3'"
[containerId]="custom-container-id">
Click me!
</a>
// onClick for non-anchor tags
<div [scrollTo]="'my-element-3'"
[containerId]="custom-container-id">
Click me!
</div>
// With options
<button
[scrollTo]="'elem-id5'"
[duration]="1800"
[middleAlign]="true"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction">
Scroll to next page.
</button>
Type: Integer
Default: 800
The duration of the smooth scroll, in milliseconds.
Type: Integer
Default: 0
The offset from the top of the page in which the scroll should stop.
type: string
default: easeInOutQuart
the easing function to be used for this scroll.
type: boolean
default: false
Middle align the scrolled element
type: boolean
default: false
(scroll directive only) Scroll to element when it is clicked
type: function
default: function(element) {}
a callback function to run before the scroll has started. It is passed the element that will be scrolled to.
type: function
default: function(element) {}
a callback function to run after the scroll has completed. It is passed the element that was scrolled to.
type: string
default: null
ID of the scrollable container which the element is a child of.
The available easing functions are:
- 'easeInQuad'
- 'easeOutQuad'
- 'easeInOutQuad'
- 'easeInCubic'
- 'easeOutCubic'
- 'easeInOutCubic'
- 'easeInQuart'
- 'easeOutQuart'
- 'easeInOutQuart'
- 'easeInQuint'
- 'easeOutQuint'
- 'easeInOutQuint'
Cheers.