AngularJs #13 How To Use The AnchorScroll Service in Angular JS ( Tutorial )

aymenz(64)

Published in

#utopian-io

Words

1078

Reading

5 min

Listen

Play

Image Source

What Will I Learn?

I will learn how to use the anchorScroll and location services in angular JS .

How to use the Location service by the hash method .
How to use the anchorScroll service by the anchorScroll method that read and scroll to the element appended .
How to use the yOffset propriety to give a padding to the element.

Requirements

Basic Knowledge of HTML and CSS language .
Basic Knowledge of JavaScript language .
Has an editor text support HTML and JavaScript .
Must has the angular files from the official site .

Difficulty

Basic

Tutorial Contents

In this tutorial we will discuss how to use the anchorscroll service in angular , it used to jump to a specified element on the page let understand what I mean by an example , what I will do ? I will design two buttons the first is go to the bottom of the page and the second go to the top of the page and between them I have some static content when I scroll to the bottom I will find the second bottom which is go to the top , and at the moment when you click on the button the page will scroll to the top , similarly when we are on the top of the page and when we click on this button " go to the bottom of the page " the page should automatic scroll to the bottom let's see how to implement it using angular js

This is the HTML page , in the body section we have the button " go to the bottom of the page " following that I have the static content , all the static content is present inside the < div > element and the second button is go to the top of the page , if I expend the div element this is our static content

So this is my content before that I have the first button and after that also I have the second button and this is the result

I copied a large text from the lorem ipsum to apply our service which is the anchorscroll to go from the top to bottom and the opposite , this is the second part of my page

And I applied some styles to be like the view and these are the proprieties that I used for this div element

In my angular js page , in the controller function I will pass 3 parameters all of them provided by angular the first one it going to be the $scope object , the second one it will be a location service I will understand why I make it and the third one it going to be our anchorScroll service

Right , so the first thing that I did I attached to the $scope object a JavaScript function and I named it ScrollTo , and to tell to the page to scroll to a specific location so the idea is to give an " id " to the element that you want to scroll to , if we remember we have two buttons the first one on the top of the page and the second on the bottom of the page if we are on the top of the page and we click on the button the page will scroll to the " id " of the element that you want basically I will give the second button an id that's the location that I will scroll to and the same thing with the first button I will give it an id , I want to pass this idea to my controller function for that I used a parameter called scrollLocation , why I used also the $location service ? Because it has a method called " hash " so what's this method going to do ? It will append what you provide to the URL so I have passed the id of the element which is in the variable scrollLocation to the hash method it going to append that to the URL using a hash sign " # " and if I provide a bottom for example it will append to the URL like that

And then I called the anchorScroll() method so what is this method going to do ? It going to read what we have in the URL , so for example if we have #bottom appended this method it going to read that to fragment and automatically scroll to that element on the page and now I will give id to the first and second button

I gave the first button the id = " top " and when we click the button we will call the scrollTo function by the ng-click attribute and we have to specify the id of the element so I choose the id of the second button which is " bottom " , the same thing with the second button I gave it an id =" bottom " and the ng-click attribute and this is the result

Look at this when I click on the first button which is go to the bottom it will call our function and pass to it the " bottom " parameter which is the id of the second method it will append this id to the URL by the hash and scroll to this element and go by us to the bottom of the page

The same thing when I click on the bottom button it will move us to the first button so to the top of the page and you can see the URL and the id that appears .Now for a reason I want a space between the browser and the first button which is attached with the browser for that I will use an propriety of anchorscroll service

And this propriety will give a space between the browser and our first element .