JavaScript

How to automatically display the “Top of Page” anchor link at any location [jquery.scrollUp.js]

 

The “Page Top (PAGE TOP)” button is a very convenient feature for users visiting long web pages. However, have you ever thought about implementing a button that automatically appears according to the page’s scroll rather than being fixed in a specific position?

In this article, I will explain how to use a plugin called jquery.scrollUp.js to automatically display an anchor link to the “Page Top” based on the scroll position, and smoothly return to the top of the page when clicked. The steps are explained in a simple and easy-to-understand manner, especially for those involved in web development and engineering.

What is jquery.scrollUp.js?

First, let’s explain what jquery.scrollUp.js is. This plugin uses jQuery to display a link to the page top when the user scrolls down the page. For example, when a user is reading a long article or product list, a button to return to the top of the page appears on the screen, allowing the user to return to the original position with a single click. This feature enhances the user experience (UX) and is especially useful when viewing on devices such as smartphones and tablets.
The main features of this plugin are as follows:

  • The button appears according to the scroll position
  • The scroll speed and animation can be customized
  • The design can be freely changed with CSS

Next, let’s look at the specific implementation method.

CSS Description to Automatically Display the “Page Top” Anchor Link at Any Position

First, let’s start by writing the CSS to determine the appearance of the link to the page top. The following code is the CSS style to control how the scroll button is displayed. Add this code to the header section of the web page. 

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:left;
	padding:15px 0;
}
p{
	padding-top:150px;
}
#idWrap{
	width:550px;
	margin:0 auto;
	text-align:center;
	height:4000px;
}
#scrollUp {
	bottom: 20px;
	right: 20px;
	background: #555;
	color: #fff;
	font-size: 12px;
	font-family: sans-serif;
	text-decoration: none;
	opacity: .9;
	padding: 10px 20px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-webkit-transition: background 200ms linear;
	-moz-transition: background 200ms linear;
	transition: background 200ms linear;
}
#scrollUp:hover {
		background: #000;
}
-->
</style>

　

CSS Key Points Explanation

  • The #scrollUp selector defines the style of the page top button. It sets the background color, text color, font size, padding, border radius, etc.
  • The #scrollUp:hover specifies the effect that changes the background color when hovering over the button. This provides visual feedback when the user hovers over the button.

This CSS style can be customized as needed. For example, you can adjust the button’s position, color, font size, etc., to match the design of your website.

JavaScript Description to Automatically Display the “Page Top” Anchor Link at Any Position Using jquery.scrollUp.js

Next, let’s look at the JavaScript code to make the page top button work using jquery.scrollUp.js. First, you need to load jquery.min.js and the jquery.scrollUp.js plugin. Add these to the head tag of your HTML or just before the closing body tag.
Using $.scrollUp({options}), you can set options such as the scroll tag id, scroll speed, and anchor link text. It works even without options (they are commented out).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<script type="text/javascript">
/*
		$(function () {
			$.scrollUp();	//It seems to be fine without options.
		});
*/
		$(function () {
		    $.scrollUp({
		        scrollName: 'scrollUp', // Element ID
		        topDistance: '300', // Distance from top before showing element (px)
		        topSpeed: 300, // Speed back to top (ms)
		        animation: 'fade', // Fade, slide, none
		        animationInSpeed: 200, // Animation in speed (ms)
		        animationOutSpeed: 200, // Animation out speed (ms)
		        scrollText: 'PAGE TOP △', // Text for element
		        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
		    });
		});
</script>

　

JavaScript Key Points Explanation

  • scrollName specifies the element ID of the page top button. This ID is used to apply CSS styles and identify the button within the page.
  • topDistance specifies in pixels how much the user must scroll before the button appears. Here, the button appears when the user scrolls 300px from the top of the page.
  • topSpeed specifies the speed at which the page returns to the top when the button is clicked, in milliseconds. For example, with topSpeed: 300, it returns to the top in 300 milliseconds (0.3 seconds).
  • animation specifies the animation effect when the button appears. “Fade” means fade in/out, “slide” means slide in/out, and “none” means no animation.
  • scrollText sets the text displayed on the button. This text can be styled with CSS.

By adding this code to the page, a “Page Top” button will automatically appear when the user reaches the specified scroll position, and when clicked, it will smoothly return to the top of the page.

HTML Description to Automatically Display the “Page Top” Anchor Link at Any Position

Finally, let’s look at the HTML code. This code is used to create a demo page. A particularly long page (over 4000px) is provided so that you can feel the scroll effect. 

<div id="idWrap">
<h1>When you scroll down, an anchor link to the Page Top (PAGE TOP △) will automatically appear at the bottom right of the page.</h1>
<p>Please scroll down continuously (about 4000px).</p>
<div>↓↓↓↓↓↓↓↓↓↓</div>
</div>

　

HTML Key Points Explanation

  • The idWrap is a wrapper element that encloses the entire page. This element has a fixed width (550px) and is centered (margin:0 auto).
  • The text inside the h1 tag is an explanation to encourage scrolling. It indicates to the user that the “Page Top” button will appear when they scroll down the page.
  • The text inside the p tag specifies the length of the scroll (4000px) to show how long the page is. This allows the user to actually scroll and confirm.

Demo Page to Automatically Display an Anchor Link to the Page Top at Any Position

If you want to check the actual operation, please refer to the demo page below. In this page, you can experience how the code introduced earlier works.
Demo Page to Automatically Display an Anchor Link to the Page Top at Any Position

Refer to this demo page and try adding similar functionality to your own website.

Source: scrollUp jQuery plugin

Source: scrollUp jQuery plugin

Conclusion

In this article, we explained how to automatically display a link to the “Page Top” at any scroll position on a web page using jquery.scrollUp.js. This feature is particularly useful for improving the user experience on long pages or content-rich websites. If you have basic knowledge of CSS and JavaScript, you can easily implement it, so give it a try.
Improving the usability of your website and making it easier for visitors to browse your pages directly contributes to user satisfaction. Take this opportunity to explore other useful jQuery plugins as well.

By introducing a “Page Top” button to your website, you can provide an environment where users can comfortably enjoy your content. The longer the page, the more important this feature becomes. This is a method that even beginners can easily tackle, so try improving the usability of your website.

　
*Please use this at your own risk. Do not use the Google Analytics tag in the head tag of the demo page.

jquery.scrollUp.js Top of Page
RELATED POST