Many websites adopt an auto scroll feature of some sort. This is generally a button or link which allows the user to jump to a different part of the document without having to manually scroll. 
A ‘back to top’ feature is generally a button or link which is either placed at the bottom of a page or fixed on the page as the user scrolls beyond a certain point. It is a feature which allows the user to return to the top of the document when clicked. This is especially useful on pages containing a large amount of content.


back to top 


Anchor links are clickable buttons/links which can take the user to another section of the page. This is usually seen in a large article page with a list of contents links at the top which refer to each section.

Both of these are examples of a scenario where the position of the scrollbar needs to be moved automatically. 

Scrollbar fundamentals

The scroll bar is an integral feature of, not just browsers, but all computer interfaces since the creation of the first graphical operating system. They provide reassurance to the user that there is more content offered below the fold. They indicate the length of the content and also the section of the content the user is viewing. It also assures the user that they have complete control over the scroll position and that they are free to move up, down, left, or right.

I believe it is important to retain these core values when we tamper with the default behaviour of the scroll bar with JavaScript. This means that care should be taken when developing an automatic scroll feature. 


Development Method

There are essentially two options a UX developer can take when building this control.
  1. Create a button which, when clicked, will ‘jump’ to the specified location on the document.
  2. Create a button which, when clicked, will transition smoothly to the specified location on the document.
In this article I am going to focus on the latter option. 

Automatically scrolling to a position on the document can pertain to any feature of a site which causes the scroll bar to be controlled by JavaScript.



A transition effect is beneficial in this scenario as it allows the user to perceive the position of the page as it is moving and gives a sense of bearing and direction. If the page were to jump without a transition, the user will be confused - have we moved up, or down? Are we viewing a different page? What just happened?

Transition Duration

This is the time it takes to scroll to the specific point on the page. It cannot be too fast or it will disorientate the user. It cannot be too slow or it will irritate the user.

Transition Easing

The transition easing is the property which describes how the animation will proceed over time. Does it proceed from point A to point B at a fixed speed or does it slow down as it reaches point B? In my opinion the transition easing function, much like the branding, should be consistent throughout the site and should match the character of the brand, i.e. you wouldn’t really use a ‘bouncing’ or ‘elastic’ effect on a corporate legal website.

Escape Clause

The user should be able to resume control of the scrollbar if they so choose, and therefore cancel the auto-scroll if necessary. 

Take a look at this example of a ‘back to top’ button. When we click the button, we briefly lose control of the scrollbar until the page is back at the top.

When we deny the user the ability to control the page freely, albeit small, we degrade the user experience, and devalue the appeal of the site.

To sum up

When developing an auto scroll feature, such as a ‘back to top’ button or a set of anchor links, a developer must consider using a transitional effect to allow a gradual scroll as opposed to a sudden ‘jump’. The developer must also consider the duration of the scroll transition, the easing of the transition, and must ensure the user has complete control at all times by allowing the scroll transition to be interrupted if necessary. 

Author bio

Ian Jackson
Ian Jackson
Front End Solutions Architect
I help bring our designs to life on the front end while collaborating closely with the UX team. Always ready to tackle any project head on no matter how daunting, I like to keep on top of all things new and exciting in the world of web development.


comments powered by Disqus

Related Articles

Sign up to our ClearThought newsletter

Get inspired and learn something new by subscribing to our FREE newsletter. It’s full of ClearPeople's thought-leadership whitepapers, blogs, events, and much more. We promise to not use your email for spam.

Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.