Adding a "Scroll to Top" Button

Adding a "Scroll to Top" Button


A "scroll to top" button is a must-have element on the sites that have more than 3 blocks. It provides visitors who land on the site with a pleasant navigation experience and makes it easier for them to surf through your website.

Here's how the button can look like:

Important: this feature is available for Pro sites only.

Adding a "scroll to top" button

1. For that, open the site Settings and proceed to the Custom code tab:

2. Insert the following line of code in the Before </BODY> section.

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


3. After that, you should add scripts for the button initialization and activation. For that, add the first following script before the previous line of code in the Before </BODY> section as well:

<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
                }, 1800);
                return false;
            });
        });
</script>



4. Now, add the second script to the <HEAD> tab:


<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">

5. To finish the integration, style your button with CSS styles. You can style the button however you want, but the easiest way is to use our given code snippet. Copy the following CSS properties and paste them in the CSS tab:

#myBtn {
    width: 40px;
    line-height: 40px;
    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: 50px;
    right: 0;
    background-color: #ededed;
    color: #5FC7AE;
    text-align: center;
    font-size: 40px;
    font-weight:bold;
    text-decoration: none;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
#myBtn:hover {
    background-color: #5FC7AE;
    color: #fff;
}

Tip: you can change the color of the button by adding another color code instead of #5FC7AE in the CSS script above.

6. Click on the Save button for changes to appear live.


Tip: if you need any help with adding or adjusting the "scroll to top" button, order Webmaster Hours from SiteCliq Studio. For that, contact us in chat or at support@SiteCliq.com.



    • Related Articles

    • Adding and Customizing a Pop-up

      Pop-up is a window that appears to the visitors when they perform a certain action on a site (for example, click on a button, scroll a page, or just open a site). It basically covers the website and doesn't allow to do anything until the visitor ...

    • Adding a Button

      Buttons can be used for site navigation and as call-to-action. You can add a button to almost any block in the editor. Adding a button 1. To add a new button, hover over the block and click on the "plus" sign where you'd like to place it: 2. Choose ...

    • Changing the Design of a Button

      To stick to the overall design of your site, we recommend to change the type and the layout of the buttons in the settings. Follow the instructions below to change the design of a button. Step 1. Changing the design of a button in the global settings ...

    • Adding Elements

      Most blocks in our editor are fully customizable. Therefore, you can enrich the look of your blocks by adding new elements to them — for example, icons, dividers, lists, etc. Tip: see the article Adding a custom block to create your block from ...

    • Deleting a Button

      In most of the blocks a button is a separate element, which you can delete without affecting the block as a whole. Deleting a button 1. Hover over the button in the block and click on the three dots: 2. Choose Delete in the drop-down list: 3. If you ...