Simple directive for scrolling into the website itself
0 people use it

Angular Warp Scroll

Simple directive for scrolling into the website and add dots navigation automatically. Currently under development.


  • AngularJS 1.5+
  • jQuery 2.2+ (still)


You have two ways to get this module running. Choose this one you feel most comfortable with.

Installation without Package Manager

1) Download

Download angular-scroll-watch from and unzip.

2) Solve dependencies

Include jQuery and AngularJS from CDN or download the main script files to your folder.

3) ADd files to your website



Please do not forget to specify the folder to the downloaded files. Replace [PATH-TO-YOUR-DOWNLOAD-FOLDER] with your path to the downloaded files.

Installation with npm

1) Check if you got node.js already running

If you get no result please download and install node.js from

2) Install angular-warp-scroll

3) Install dependencies jquery and angular

3) Add all necessary files to your website

Put this lines into <head> of your website.

It is also recommended to use the delivered styles, but they are not necessary.

4) Initialize the script

Specify the angular app in the <html> tag.

Load angular-warp-scroll controller in the <body> tag.


After you have followed all steps above, you are now free to use this module. Take a look at the example.html to see all features.


Dots navigation

The navigation is rendered automatically from the amount of slides, which are declared by class="slide". Adding the attribute data-title specifies the displayed navigation point.

Adding slides

Add element with class slide to a wrapper.

comments powered by Disqus
This page was last updated over 2 years ago.