How to add scrolling back to top button

/
5 Comments
Try scrolling my page down and see my back to top button at the right-bottom side of the page.

You want some of that? Now you got it.
I'm going to teach you how to do a smooth scrolling back to top without jumping up straight to the top of the page :D

Consider yourself lucky cause i find that piece of script really long time. :S

So, if you want just a ordinary back to top link without an image here's the steps.

First, place this script between your <head> and </head> code :

NOTE : remove all the <br /> or it won't work =="

Then put this link between your back to top text. <a href="javascript:dd_scrolltotop()">Back to top?</a> Done. It should be working properly and will scroll smoothly to the top now. If you want the back to top link to appear after a few times you scroll the page down like mine, use this code :

replace http://YOURIMAGEURL.png to your own image.

Note that you don't have to add any other links anymore because all the things had been modified inside the script.
If you wanna modify how the link will appear in your page, find the word Back to top? in the script and add anything you want to appear in your page. For example, mine is a transparent image with an arrow up.

If you wanna set how where should the link appears find the word {offsetx:50, offsety:30}. That controls where should your link appears. offsetx defines the length in pixels from the left, and offsety defines the length in pixels from the bottom. so if you change your offsetx to "30px" your link would appear 30px from the left.

For how long the link should appear, find the code startline:600 and modify how long you will appear. I still can't figure out whats that 600 stands for though, but if the larger amount you put in that startline, the longer your back to top link will appear so yeah. :)

I hope this tut helps, if you got any problems or questions just comment in this post.


You may also like

5 comments:

  1. I am finding this script for a long time, thank you for sharing this. :)

    ReplyDelete
  2. you're welcome! im glad it helped you ^^

    ReplyDelete
  3. but the script slower down my laptop and make it unresponsive. :(

    ReplyDelete
  4. hahaha.
    me too, but i guess after you refresh a few times it'll be okay :)

    ReplyDelete
  5. aku ga bisa loh kak XD Hhwhwhwhw

    ReplyDelete