How to Add the "Up" Button to Your Website

Available with the Pro plan and above, as well as during the 7-day free trial

The "Up" button enhances your website navigation, allowing visitors to swiftly return to the top of a page from anywhere on it.

Let's take a look at how to add the button code to your website and how the button itself functions.

Add a Code to the Website Header

In the <head> website part, you need to link the jQuery library and add icons and button styles.

Go to your website settings, open the "Custom code" tab, and click Add code to site.

The code you install in "Custom Code" will function on all website pages.

Select a placement in <head>, and enter a name that will help you quickly find the code in the list.

Enter the following code in the field:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Button styles -->
<style>
#myBtn {  // button styles before hovering 
    width: 48px;
    line-height: 48px;
    overflow: hidden;
    z-index: 999;
    cursor: pointer;
    opacity:0;
    transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fbfbfb;
    color: #333;
    text-align: center;
    font-size: 24px;
    font-weight:bold;
    text-decoration: none;
border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.18);
}
#myBtn:hover { // button styles after hovering
    background-color: #009fc1; 
    color: #fff;
}
</style>

To see what the default button looks like, scroll to the end of this article. You can modify button styles as desired, customizing your button size, position, background color, text color, font, and other parameters.

Click Add.

Add Code to Your Website Body

In the <body> website part, you need to add the "Up" button script that launches the function and defines button behavior and content.

Click Add code to site again.

Select a placement in <head>, and enter a name that will help you quickly find the code in the list.

Enter the following code in the field:

<script>
        jQuery(document).ready(function(){   
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > 600) {
                    jQuery('#myBtn').css('opacity', '1');
                } else {
                    jQuery('#myBtn').css('opacity', '0');
                }
            });

            jQuery('#myBtn').click(function () {
                jQuery('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
</script>

<div id="myBtn" title="Back to top"><i class="fa fa-arrow-up"></i></div>

To see the button default behavior, scroll to the end of this article. You can customize your button logic and display as desired.

scrollTop() measures the scroll distance (in pixels) from the top of your page. Your button will not be displayed until this distance is crossed — once this happens, it will become visible.

animate({scrollTop:0} sets the speed (in milliseconds) with which your page will be automatically scrolled to the top when a user clicks the button.

<i class="fa fa-arrow-up"> selects an icon class from the linked library.

Click Add.

Check the Result

Go to your website page, and scroll down. Your button should appear as soon as you scroll beyond the first screen.

    Rate this article about "How to Add the "Up" Button to Your Website"

    User Rating: 4 / 5

    Previous

    How to Edit Images Using the Website Builder

    Popular in Our Blog

    Try SendPulse today for free