jQuery – Scroll to Top

Using anchors within the same page to navigate between sections is a good way to improve the user’s experience.

However, this jump occurs in an instant and gives the user little feedback to indicate that the document position has changed.

The use of animations can greatly improve the user experience and feedback by creating on-demand controls and transitions.

The following is a simple example that demonstrates window scrolling effects and the jQuery scrollTop() function.

The user scrolls to the bottom of the page to have a box near the bottom-right side of the window fade in.

Clicking on the box will take the user to the top of the page and the box will fade out.

jQuery API Documentation – .scrollTop()

JSFiddle – jQuery – Scroll to Top

Share This

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>