posted time Created time: 2015-07-05 posted time Last updated time:

Go to top scroll component for CMS Template

The Go to top component is to scroll the page to the top of the page. This component is useful when the page is long.

Appearance and usage of Go to top component

The component is shown when the page is scrolled. The layer with link to click is shown like below.

link to scroll to the top

By clicking it, the page scrolls vertically to the top of the page with animation. This function is implemented in Javascript.

Source code of Go to top component

This component is implemented in Html, Javascript, and Style Sheet. The server side program is not used.

Html code

The html code is below.

This component is implemented by a single anchor layer. When you customise the design, update this Html code and the Style Sheet.

Javascript

The Javascript code of this component is below.

This Javascript does following operation.

Register the function to show or hide the component

The "gotoTopMain()" is the call back function for the scroll event. This function detects the scrolling status, and hide or show the component.

If the vertical scroll is not done, hide it, otherwise, scroll is done, show it.

Click event handler

The ""scrollToTop() function is the click event handler. This function scroll the page with animation.

Therefore, this function executes following operations.

  1. Detect current scroll position
  2. Scroll certain value
  3. Do same operation after 30 milliseconds while the scroll position go to the top

Style Sheet

The Style Sheet of this component is below.

This Style Sheet has following definition.

  • The class to make the component invisible.
  • The design of the div layer and inner object.

When you customize the design, please change the anchor layer's style.


Go to Top