For the sake of those who don’t understand the title of this article and what it’s meant for, am going to explain before diving into the coding aspect.
I know at one point when browsing, you must have come across a link telling you to scroll to top or down the website. Also you will notice that this scroll links or button doesn’t load in your browser unlike other HTML links.
Practical Example
When you click here, you automatically taken to the bottom of this post.
It might note work when click the first time, if it reload this page, click again and see what am talking about.
Step In Implementing Scroll to Top or scroll bottom feature
- Firstly we have to create an html link with the href value containing the CSS id selector name. Example: we going to use #top as our CSS ID i.e <a href=”#top”> scroll top </a>
- We need to add the CSS id used in the HTML href value above in any suitable html tag and place it where you want the link to scroll to when clicked.
Example: add this html tag where you want the scroll to stop <a id=”top“> </a>.
Apart from tag <a>, you can also use <span>, <table> etc so far, the css id is specified - You may change the css id from top to any word so far, the ID are same in the html link and the scroll location html tag
To some people, it not new, but i bet, most webmasters don’t even know this trick. I have seen some using just the html link with href value #top without placing a html tag with the ID to determine where the scoll should go.
If you find this tutorial useful, or have a contribution to make, feel free to use the comment form below.