UItoTop jQuery Plugin


Current version: 1.2 23/4/12. WordPress plugin version over here.

Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ).

Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

View the demo Download Fork It

RELEASE NOTES

ver 1.2 – Code Improvements. Requires jQuery 1.7+.
ver 1.1 – Improvements to configuration conveniences. *
ver 1.0 – First Release.

* Big thanks to Rémy Tourbiez for this contribution to the code.

Reactions (56)

  1. Pingback JQuery UI To-Top dynamic plugin | Squico

  2. Awesome Plugin! Any chance that you will make it a wordpress plugin? I tried using your script and I it rendered my other wordpress plugins disabled. I guess clashing of codes?

  3. Pingback 7 ‘Scroll to Top’ jQuery Solutions

  4. Pingback Solociones jQuery para hacer un Scroll-top. « Blog de Diseño Web

  5. Pingback UItoTop, Page au Top, plugin jQuery !| Webmaster – Ressources et outils gratuits pour votre site internet – Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster

  6. Hey Matt this one is the best. For sure.
    Avoiding the hard coded anchor is the best way.

    As I do not use WP I’m figuring out why the little piece of code in the head section doesn’t work on my website. It may conflict with other JQuery scripts I suppose (even if I didn’t get any issue). Is there way to isolate the function in order to load before all?

    Thanks for replying.
    Sven

  7. Hi!
    I would like to know if besides the effect (up to down), it can make (down to up), with the sames files (js)… for example I can make a link that tell: “Go to the footer”, and the pages moves sliding to the foot.
    Please help me!
    Thanx!

    Juan

  8. Thanks for that! Just used it for a WordPress-based website!

    Kind regards,
    - Alex

  9. Franck Rouanet

    Hi,

    Nice plugin, useful and design. I realised a free Prestashop Module based on your script. You will find soon this on Prestatools website.

    Kind regards,

    Franck Rouanet

  10. Hi,

    first thanks for this useful plugin. Currently I am testing this plugin. But in Opera 10.60 on my testpage and your demo-page, it flickers during top-movement.
    Are there any solutions?

    Greetings David

  11. Nice easy scroll plugin. Thanks for the demo. Unlike some sites, they don’t have any demos or screenshots. This plugin looks promising.

  12. Deepesh Chetariyil

    awesome, simple, yet tachy…i luv it…! have to try implementing this in my site someday. maybe on the next revamp. thanks Matt ^_^

  13. I tried this plugin on my web-stores, It already uses jquery-1.2.6.pack.js so i skipped adding jquery-1.3.2.min.js, the issue i face that the scrollto sprite graphic does not appear when i scroll down, it only appears on hover, double-checked the css everything seems fine,I wonder whats causing this, any pointers would be appreciated.

    Thanks

  14. Hi Matt,

    First I would like to thank you for that plugin, it’s something I was looking for since a long time, even tried to do it myself without success.

    And I would like to give my little contribution for IE compatibility (nothing serious though).

    Just add “cursor:pointer;” in “#to_top” to be sure to show the right cursor ^^ since IE just use the normal one on hover (not very user friendly).

    Dunno if everyone else had this bug…

    Thanks again and keep up the good work !

  15. Hi Matt,

    I want to ask you, can I use this plugin for my wp theme on themeforest? I will put your site in credit section. :)

    Thanks

  16. This is great. Quick question though. Is there a reason why the hover is the way it is with an added span apart from the fade? The way it is, it doubles up both the off and hover states of the png image, resulting in more jagged edges on the rounded corners because it’s adding a hair more opacity to the pixels. The way you have it doesn’t really utilize the whole idea behind an image sprite. Maybe my eyes are going bad, but that’s what looks like is happening.

  17. Pingback Scroll to Top | وویوت

  18. how can i use this plugin to navigate to bottom

  19. Great stuff, but does not work if someone has disabled JavaScript.

  20. I think it’s one of the most beautiful.
    Many buttons “BACK TO TOP” have a horrible design.

    Thanks! ;)

  21. Pingback Plugins Jquery Scroll » Example Codes

  22. hello, really love this, very easy to implement, have however noticed a little bug, if you press the button more than once in quick succession it repeats the script and periodically stops you from scrolling back down the page… is there a possible fix?

    cheers!

  23. Hey Matt,

    Love what you have done here, however I am trying to implement it into a WordPress theme that I am building, and I’m not having any luck at the moment. I’m wondering if it has anything to do with the fact that you built it using jQuery 1.3.2 and WordPress comes with jQuery 1.6.1

    Any thoughts??

  24. I’m debugging this site (my-farm.org.uk) after another dev added UItotop. There seems to be an issue where an imbedded youtube player gets restarted if the page is scrolled enough for the to Top link to appear and then scrolled back into view (or the link is clicked). If I remove the link in Firebug console it doesn’t happen. Any ideas?

    Thanks,

    Steve.

  25. Not sure why I didn’t see this earlier, but this is great Matt. I’m loving it and think I may use it on a project soon ;)

  26. Love the plugin and I’m using it for my new portfolio site. I worked perfectly until I added another jquery plug for my gallery images. If I remove the gallery code, bingo the scroller works, add it in again and scroller does not appear. Any ideas? I uses: 1.61.js plus a custom .easing.1.3.js.

  27. Anthony

    The script is working on my site except I can not see the up arrow when I scroll down. It is there though because I can hover mouse over where it should be, click, and sure enough…it scrolls to the top. What can I do to see the arrow?

  28. Your demo seems not to work with iPhone or iPad.
    Could you make this possible?

  29. Is there a way to make the arrow that’s appearing to go to the top of the page, make it go to an external link/website?

  30. Well, what can I say? Thanks a lot mate! Very easy to implement and use! Nice job! Dimitri

  31. It does not work in IE (Win 7 + IE 8). Works all good with Firefox and Chrome. The weird thing is, in your demo it also works with IE… I can’t see where the problem might be…

  32. I tried the WordPress plugin version but it was not working, perhaps because of the plugin conflicts or something.
    So I decided to use the jQuery plugin only
    I changed the image and the fixed position value here:
    http://navreport.com/tareqs/hello-world/

    I love the fading effect and it works nice on my web project :)
    Thanks!

  33. Perfect ! I loved it..! Thank you so much for this nice work. It has just a problem on my website. It has conflict with lightbox slideshow and I should choose one of them for my website. this or that!! any advice ?

  34. hey, I love the plug-in, and it was super easy to use.

    However, I would like to add some functionality to make the button stop scrolling with the screen when I begine scrolling into the footer.

    We have a black background footer, and light grey background body, so the icon looks great on the body, but gets lost in the footer.

    How could I make it stop scrolling when it reaches 500px before the end of the document?

    Thanks again for the great plug-in!

  35. Great plugin! Thanks!! :-) I would suggest adding the following to the CSS to make the button always appear on-top (to for example avoid that the button appears behind elements like the official Twitter Widget):

    “z-index: 1000;”

    caveats…:
    1) This simple approach depends on other elements on your page all having inferior z-index values, etc. (duh).
    2) When popovers are used, depending on the implementation and browser, this may cause the button to appear when it should not (i.e. while interacting with the popover).
    3) The indicated value (1000) is a random big value :-)

  36. Dear Matt,

    Happy new year.

    I publish long text-based web documents for use by my students. In addition to the ‘Back to Top’ link I would also like to add a ‘Go to Bottom’ link so that students can jump straight to the bottom of the page. Also, when the student is mid-page, I’d like both the ‘Back to Top’ and ‘Go to Bottom’ links to be visible.

    Is there any straightforward way of achieving this using your plugin. I am not a jQuery / Javascript expert so I would be very grateful if you could advise me.

    Second: does your licence allow me to use your plugin on my University’s web site. The pages in which it would be used will be accessible only to students and instructional staff.

    I would be grateful for your responses.

    Many thanks and kind regards,

    Grant Bailey
    University of Western Sydney

  37. Hi I’m trying to install this but having trouble. Can anyone help? added all files but it doesn’t show up. Thanks a lot if you can.

    chileno.co.uk

    • Sorry, just answering a part of my own problem. I have to rename my jquery to jscript_jquery…js because I’m working in Zen cart and this is the protocol for making sitewide jscripts load. I have others where I have made this change to the filename and each has worked. This one doesn’t however. Does anyone know why?

      Cheers
      m

  38. Really nice, thanks for sharing this. Not sure what the GPL2 licence means if I use it in my webpage. My content is licensed under CreativeCommons.

    That should be ok, right?