StudioPress Premium WordPress Themes

Adding Scroll to Top & Down Using HTML And CSS ID


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

  1. 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>
  2. 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
  3. 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.

Don’t Want To Miss Our Update, Subscribe Now
About collizo4sky

Agbonghama Collins is a webdeveloper and an internet geek. I love writing and sharing the little idea & information i know. Hope you enjoyed my Article.

You can get in touch with him via these modes: Follow him on Twitter, add him on Facebook or on Google+

  • http://www.baseloaded.com lastdon02

    hy its ok bt can u gve me full example on how to use d code ? I mean type it here

  • http://www.bankfiles.net Matomi

    Pls tro more light in dis 2torial via many examples. bcos i don’t understand. Tanks and keep d gud work going

    • http://wapden.net collizo4sky

      Read the post line by line. you will understand.