Make a smooth Auto Scroll to Top button for your Blogger Blog on Blogspot [using jQuery]

Swashata10

Scroll to top will be a good feature for your blog if you are having a big page! As if someone has scrolled down to bottom then he/she really has to scroll much to make his/her way to the top! So why dont we give them an Automated option for this. As you can see here in greenTechspot I have added a automated scroll to top button at the very end of the page.

Here is the guide on how we can do this:

  • Download this small little .zip [50KB only cool] file where you will get all file needed to make your scroller. This file includes the jQuery and the main JS file from Dynamicdrive. Also I have included some Up Arrows to ease up your work! You can use those or just google to get more or can visit here also: Hongkiat.com
  • Now unzip the file and you will get everything at your hand. Now upload the Arrow button which you like to a good free image hosting service like photobucket. From there get the direct link of the image file
  • Open the scrolltopcontrol.js file with Notepad [or in my case Notepad++] and search for the line

    controlHTML: ‘<img src=”DIRECT LINK OF YOUR IMAGE“

    Replace the DIRECT LINK OF YOUR IMAGE with the link which you have copied from the step above. Then save the JS file.

  • Now in this step you will need a good free webhosting serive provider. I will recommend www.07x.net Go there and setup a free account. Suppose your web site name given by 07x is http://YourName.07x.net
  • Now upload the two files viz. scrolltopcontrol.js and jquery.min.js to the htdoc folder under your 07x file-manager. So that the location of the jQuery and JS file will be something like follows:

    http://YourName.07x.net/scrolltopcontrol.js

    and

    http://YourName.07x.net/jquery.min.js

    Open these locations on your browser to confirm and note down the address.

  • Now final step:: Goto Blogger Dashboard ►Layout ►Edit HTML and search for

    </head>

    Just BEFORE it paste this code

    <script src=’http://YourName.07x.net/jquery.min.js’ type=’text/javascript’/>
    <script src=’http://YourName.07x.net/scrolltopcontrol.js’ type=’text/javascript’>
    /***********************************************
    * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Project Page at http://www.dynamicdrive.com for full source code
    ***********************************************/
    </script>

    Obviously you need to change the coloured portion according to your account!

  • Click on preview and see if the scroll button is coming or not! If not then revise the procedure and if it is coming then save your template anddddd you have a good smooth scroll to top button at your bloggermrgreen

The best thing about the button is that

  1. It show up with a blur-in animation when you scroll a little bit down
  2. The page will scroll up with animation

HOT TIP:

  • For better page load try copying the script before </body> instead of </head>
  • I got this info from Dynamicdrive. Please keep the licenses intact for legal use. If you are a well savvy person then you can go to the link given to dynamic drive and make more customization if you like.
~~The End~~

RATE IT: (1) Sucks (2) Stupid (3) Kewl (4) Rad (5) Wicked

10 comments

  3. lowspeed

    How can you position the button someone inside a div ? its not noticeable in that far corner.

  4. Swashata

    Its done through jQuery! Anything be it text or image which is wrapped inside an <a href="#top will scroll your page up! The div has a fixed position at the bottom left corner. So it is shown even u scroll down or up. By using jQuery we make the opacity of the image to 0 when the page has totally scrolled up and we change it to 1 when the page has scrolled down! 🙂

  5. Swashata

    For that, just add any image anywhere you like and wrap it inside a &lt;a href="#top"&gt;YOUR_IMAGE&lt;/a&gt; That image will be automatically assigned that scroll to top function. Also you may change the offset to position where ever you like!

  7. mercado

    ive been waiting for this post…
    can we just borrow your code for this coz I already dig up a lot of free web host and its so diffuclt.. a lot of sign ups.. verification and in the end it just confuse us.

  8. mercado

    please share your code for this coz visit this site http://www.dynamicdrive.com their code wont work…
    I even have mine still doesnt work.

    /***********************************************
    * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Project Page at http://www.dynamicdrive.com for full source code
    ***********************************************/

Comments are closed.