AngularJS anchorscroll example Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 21 of angularjs tutorial in
this video well discus anchor scroll
service and angular the anchor scroll
service is used to jump to a specified
element on the page let's understand
what we mean by this with an example so
here on this page we have a button at
the top of the page and then we have
some static content as we scroll to the
bottom of the page we have another
button here now at the moment we are at
the bottom of the page notice the scroll
bar this is also present at the bottom
at this point when we click this button
go to the top of the page the page
should automatically scroll to the top
similarly when we are at the top of the
page and when we click this button go to
bottom of the page the page should
automatically scroll to the bottom let's
see how to implement this using angular
let's flip to visual studio and see what
we have on the HTML page so this is the
page that we have seen on the browser
within the body section at the top we
have the button so go to bottom of the
page so that's the button that you see
right here and following that we have
the static content so all the static
content is present inside this div
element so if I expand this development
notice what we have here we have the
static content along with two you know
HTML elements bold and break so you will
see these elements all over the static
content that you have here so basically
I'll have all this HTML available on my
blog and to format that div we are
applying some Styles using a stylesheet
so notice we have referenced a style
sheet right here and if you look at that
style sheet we have a style for the
development so wit border font family
font size and padding all standard
styles so that's the development and
then at the bottom of the page we have
another button which says go to top of
the page so that's straightforward HTML
there and if you look at our script or
J's file which has got our angular code
all we are doing here is creating a
module with the name demo app ok and
then within our HTML page at the HTML
tag level we are using ng app directive
initializing that to
demo app the next step now is to create
our controller so let's go do that
so I'm going to call this controller
demo controller and - a controller
function I'm going to pass three
parameters all of them provided by
angular the first one is going to be the
scope object second one is going to be a
service and this is going to be a
location service in a bit we'll
understand how we are going to make use
of these services and the third service
is going to be our anchor scroll service
all right so the first thing that I'm
going to do here is to this cope object
I'm going to attach a JavaScript
function I'm going to call it scroll to
you can give it any meaningful name that
you want so basically this is the
function that's going to allow us to
scroll you know to the location that we
want to and to tell the page to scroll
to a specific location we have to give
the ID of the element on the page to
which we want to scroll to now if you
remember on this page we have two
buttons one is present at the top and
the other one is present at the bottom
so when we are you know at the top and
when we click this button we want to
scroll all the way to the bottom of the
page so at the bottom of the page we
have this button so basically I'm going
to give this ID you know that's the
location to which I want to scroll to
similarly when we are at the bottom we
want to scroll to the top in that case
I'm going to give the ID of this button
okay so we want to surpass the ID of the
element to which we want to scroll to to
this function so I'm going to call it
scroll location again you can give it
any meaningful name you want all right
so the next thing that I'm going to do
is I'm going to make use of this
location service this location service
has got this method called hash so what
does this method going to do it's going
to append whatever you provide to that
to the URL okay so let's say for example
you know we passed the ID of the element
to this hash map
that this hash method is going to append
that to the URL using a hash symbol
that's a pound symbol you know something
like that and then if I provide let's
say IDs the top then that will be
appended to the URL like that that's
what the hash method is going to do and
then we're going to call the anchor
scroll method so what is this anchor
scroll method going to do it's going to
read what we have in the URL so for
example if we have hash top appended
this anchor scroll method is going to
read that hash to fragment and
automatically scroll to that element on
the page okay
so we'll see all that in action in just
a bit alright so that's all there to it
within our controller so our controller
name is demo controller and we want this
to be in charge of the body section so I
am going to use ng - controller
directive and specify the name of our
controller and now so this is the button
that is present at the top of the page
I'm going to give it an ID let's call it
top and then when we click the button
what do we want to do we want to call
our scroll to function and to this
function will have to specify the ID of
the element on the page to which we want
to scroll to so we are going to call the
method and let's pass the ID now we want
to scroll to this button you know which
is present you know all the way at the
bottom of the page so first let's give
it an ID I'm going to give it an ID
bottom okay and this is the element to
which we want to scroll to let's do the
same thing with this button so ng -
click when we click the button that is
present at the bottom of the page what
do we want to do we want to scroll to
this element which is present at the top
so here the ID is going to be top all
right so that's all there to it let's
save the changes and let's go reload our
page look at this when I click this
button go to bottom of the page the page
automatically scrolls look at the
scrollbar it's now at the bottom and now
when I click this button it's going to
scroll to the top of the page but before
that look at the URL it has appended
hash bottom to the page okay so who has
done that the hash method has done that
okay so you know when we add at the top
when we click this button we are passing
bottom the ID of this button to our
scroll to function and this hash method
is actually going to append that to the
URL and then the anchor scroll method is
going to read that hash fragment and
automatically scroll to that element on
the page look at this go to the bottom
of the page now when I click this button
look at what's going to happen to the
URL also notice the scroll but now it's
Pleasant at the bottom when I click the
button look at that the hash fragment
exchange it to top and the scroll bar is
Pleasant at the top of the page
now notice between the element you know
this button and the browser there is no
gap here let's say for some reason you
want some padding there you know you
want to leave some space there to do
that you can use another property of the
anchor scroll service so the anchor
scroll service has got Y offset property
so I'm going to set this to 20 so
basically this is going to leave you
know that much space between the element
and the browser let's actually look at
that so let's reload this page and look
at this when I click go to the bottom of
the page and when I click go to the top
of the page now we have caught some
vertical space between the button and
the browser vendor so anchor scroll
service is used to jump to a specified
element on the page the location service
hash method appends hash fragments to
the URL anchor scroll method will then
read the hash fragment from the URL
and jumps to that element on the page y
offset property specifies the vertical
scroll offset thank you for listening
and have a great day