Part 9 – Create Go to top button | Make Desktop First Responsive Portfolio Website


Hi, my name is Bibek and in this session
I’m going to show you how to create ‘Go to top’ button. Before starting let’s have
a quick demo on how it should work. When you scroll down the button gets visible
and when you click on it, it move to the top of the page. Also button should
disappear once the button move at the top. Now let’s begin by adding HTML code. Just before the end of footer tag, add
anchor tag with ID called ‘goTop’ You can see it at the bottom of the page now. Then let’s style this using CSS. Here I’m trying to style it as
square button using some background color and text color. Also I have set its
position as fixed because I always want them at bottom right corner of the page. Now let’s hide this text. We don’t need
it according to the design. you can use CSS properties like this
text-indent and white-space:nowrap with overflow:hidden. Now let’s add some hover effect. In the Hover it has got the opacity of
0.7. Finally let’s add ‘up’ icon using CSS in
after psuedo element. Don’t worry this is just a normal CSS border where I have
added transparent border for two sides and added transform rotate to make it
look like ‘up’ icon. I’ll show you in developer tool. You can see if I add border color and
border width it looks pretty normal. It might make more sense to you when I
remove this transform. So this is how icon is made using CSS. Now since HTML and CSS are done let’s
work on jQuery to make it functional. When working on jQuery we have to worry
about two things. First thing is when we scroll the scroll bar, I will just show you in
the example. When we scroll the scroll bar at certain point, button should be
visible and then it should hide again when we scroll at the top. Let’s achieve
this first thing now. Here I have used scroll function. It
means scroll event occurs when user scrolls the scroll bar. Then I have used
scrollTop method which returns the vertical scroll bar position. So the
whole script means whenever the value of scroll bar exceeds 200, button will be
shown otherwise button will be hidden . How do we know this is button? because it has
got the same ID that we have used in HTML. Now let’s check the preview. It seems to be working but at first
button is always visible which is not correct. So let’s hide it using CSS. Great!! it is working now. Then second
thing is when we click on this button you should have smooth animation. So this
time we have to use click event in button. This is the click event we use for
button because we want something to happen when we click on it. Then I have
used animate method with scroll top value set to zero. It means it will go at
top of the page. Then I have added slow as a speed. You can set to fast or some
numeric value like 400, 600 and so on. Now let’s look at the
preview again. Great!! it seems to be working now. Feel
free to comment below if you got any questions. Also don’t forget to like and
subscribe my channel to get more tutorials in the future. This is the end
of this session. In the next session I will show you how to add horizontal
scrollbar using jQuery. Thank you.

Add a Comment

Your email address will not be published. Required fields are marked *