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.
The component is shown when the page is scrolled. The layer with link to click is shown like below.
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.
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.
- Detect current scroll position
- Scroll certain value
- Do same operation after 30 milliseconds while the scroll position go to the top
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.