Home / Web Development / HTML / Scroll To Top Of Page Using jQuery

Scroll To Top Of Page Using jQuery

Hi Guys,
The scroll to top is very important feature in web development. Many web site provide this functionality. The content of a web page exceeds and visitors scroll down the web page, then having a button to smooth scroll to the top of the page is a good idea. In many websites with scroll to top feature so that their visitors can easily navigate to top section of website with one click. The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. This feature is really helpful in websites, having long length pages.

We can implement this Scroll to top of page using jQuery. You can simply reference to the top of the page. But it’s not good look. So, we use jQuery animated function for good looking to make the scrolling easy and smooth. This feature is very easy to create and implement.

Page Content

  • jQuery
  • HTML

demo

Step 1:

Adding jQuery to a page. This code is included into the head tag of your html document.

This will tell the browser to load jQuery from Googles server when your page is loaded.

Step 2 :

This is the link or button that will take the user to the top when clicked.

Step 3:

Adding CSS style into your page in style tag.

Step 4: The main part is of jQuery code is:

The scroll to top functionality described here.

The jQuery code is checking if the value of the page scrolled down is greater than 100 then fadeIn() the button, when the button is clicked then scroll the page to the top and fadeOut() then button.

Step5: HTML Code is:

The HTML part is used for web site page content.

Full code

If you have any query or any doubt then please feel free to ask.

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Media Auto Publish Powered By : XYZScripts.com