From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Here’s a way to scroll to the top or bottom of your website with a simple click. I have used the jQuery special scroll events from James Padolsey, and some few extra lines of jQuery. There are two buttons with fixed position on the bottom left of the page, each one with the functionality to move either down or up in the page. If you scroll the page, these two buttons will fade out, which gives a nice and smooth effect.
The jquery code:
$(function() { // the element inside of which we want to scroll var $elem = $('#content'); // show the buttons $('#nav_up').fadeIn('slow'); $('#nav_down').fadeIn('slow'); // whenever we scroll fade out both buttons $(window).bind('scrollstart', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'}); }); // ... and whenever we stop scrolling fade in both buttons $(window).bind('scrollstop', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'1'}); }); // clicking the "down" button will make the page scroll to the $elem's height $('#nav_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); // clicking the "up" button will make the page scroll to the top of the page $('#nav_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } ); });
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Pingback: uberVU - social comments
Are we complicating ourselves, we use to do this with href
With href you “jump” to a position. With this effect you let the user see where he is moving because you scroll the page.
Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. can’t scroll down.. why this ?
Thanks for your tutorial
“Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. ”
you have a spelling error in the ID or Name of the HREF! π
Good tutorial. Thanks
Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. canΓ’??t scroll down.. why this ?
Thanks for your tutorial
very nice effect, i put it in my personal list
http://www.ajaxshake.com/en
thanks a lot!.
Where to put this code??in witch section in html?
Just downloaded the Chrome version from the gallery. I see the potential of your scroller, but could you please slow it waaay down so it’s smooth and readable? Otherwise it serves no real purpose.
Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. β
you have a spelling error in the ID or Name of the HREF! π
i f you switch “$(‘html, body’)”
to “$(‘html’)” it will be working with Opera
Good tutorial, this is a very simple tutorial with good function
Thank you
Just want I was looking for. Thank you very much.
i was searching for this code,
Thanks a lot for sharing.
The animated scrollTop() does not work in FF even if it is used for window, document, body or html.
Using the latest jQuery 1.6.1 library.
Any suggestion?
Great tutorial! I am putting this scroll technique in my Blog π
@Danny it works fine fore me.
Hey! This is really the effect I was looking for, but I’m having difficulties implementing this to “multiple elements”.
I have a column which contains images and text, and I’d like to make it scroll everytime anything in that column is clicked. Is that simple?
Amazing. Really nice jQuery Scroll trick.
Thanks.
Can you please point me to a Javascript that can scroll to a name anchor tag by click of a link? Thanks.