jQuery Scroll to Top with CSS

The “Scroll to Top” button allows users to smoothly scroll to top of the page.It’s a little button which enhances navigation experience for long pages article or website.

This button is very suitable for website with lots of contents.The Scroll to top button fade In on the right-side (can be on left-side) of page when the user scroll down beyond a certain point, and remain visible during scrolling.

View DemoDownload

Creating the Scroll to Top

Now we will create the Back to Top(or Scroll to Top) button using HTML,jQuery and design it with CSS.

Creating the HTML Structure

We have to insert the “Scroll to Top” button at the end of the page i.e before <body/>.

<body>
    <!- Your Body Content Goes Here -->
    
    <a href="#top" class="mct-top">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><polygon fill="#FFFFFF" points="8,2.8 16,10.7 13.6,13.1 8.1,7.6 2.5,13.2 0,10.7 "></polygon></svg>
    </a>

    <!- Your Script links Goes here -->
</body>

Styling the button

The link will appear fixed on bottom-right-side of the page. Initially it’s visibily is hidden i.e. (visibility:hidden;) and opacity is 0 i.e (opacity:0;).

.mct-top{
    position: fixed;
    bottom: 10px;
    right: 10px; //You can replace right to left
    border-color: #c36922;
    background: rgb(221, 130, 59);
    color: #fff;
    -webkit-box-shadow: inset 0 1px 0 #e8ac7c,0 1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 1px 0 #e8ac7c,0 1px 0 rgba(0,0,0,.15);
    padding: 18px 10px 5px 20px;
    text-decoration: none;
    font-size: 0px;
    width: 30px;
    height: 30px;
    border-radius: 0px;
    box-sizing: content-box;
    visibility: hidden; //Initially Visibility is hidden
    opacity: 0; //Opacity is set to 0
 
    //Adding transitions
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

When the use takes his cursor over the top, the button will fade in.

.mct-top:hover{
  opacity:1;
}

Both Visibility and Opacity is controlled through two class : .mct-is-visible and .mct-fade-out.

.mct-top.mct-is-visible{
  visibility: visible;
  opacity: 1;
}

.mct-top.mct-fade-out{
  opacity: 0.5;
}

These classes will be added and removed to “Scroll to Top” button using jQuery.

[moptin id="3100"]

jQuery Event Handling

In our script.js file, we have defined mct_scroll_top variable to control the “Scroll to Top” using jQuery.

You can edit these variable according to your need:

var mct_scroll_top = {

  offset: 400, //Browser window scroll (in pixel) after which button will be visible

  offset_opacity: 800,  //Browser window scroll (in pixel) after which "Scroll to Top" button opacity is reduced

  scroll_duration: 500,  //Duration of Scroll to Top in microseconds 

  //Extra functions goes here.....
}

The mct_scroll_top.offset object is used to toggle the .mct-is-visible class,mct_scroll_top.offset_opacity object is used to toggle .mct-fade-out class and
mct_scroll_top.scroll_duration object is used to defined the time taken to scroll to top of window.

View DemoDownload

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

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