How to Enable or add your own Scroll-to-top button

If you would like to have a scroll to top button on your site all you need to do is enable it.  To do that go to your site's dashboard > Appearance > Customize > General > Layout then Enable the Scroll-to-top button.  Don't forget to hit Save & Publish when you are done.

sroll-to-top-btn.png

 

But if you prefer to use your own customized scroll to top icon, button, text or image you have to disable the Scroll to Top Button in the general layout first.  Then go to your site's dashboard > Appearance > Customize > Footer > Footer Layout.  Select "2 Columns" for the layout.  Under Column 2 Layout select "Text" then paste the code of your scroll-to-top button then save & publish.

Here's a sample script for an animated scroll-to-top icon.  For this sample we are using jQuery when a user scrolls down the page so we'll use this script.  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Since we are using Font Awesome for the icon we'll have to add the icon font ID.

<link rel="stylesheet" id="font-awesome-css"  type="text/css" media="screen">

 

To show and hide the button we use the jQuery ‘scroll’ to detect if the viewer is scrolling.
<script>
$(function(){
     $(document).on( 'scroll', function(){
         if ($(window).scrollTop() > 100) {
            $('.scroll-top-wrapper').addClass('show');
        } else {
            $('.scroll-top-wrapper').removeClass('show');
        }
    });
});
</script>

 

Next is to put a button click and scroll to the top of the page using the jQuery ‘click’ event. The scrollToTop function uses the jQuery animate method to scroll to the top with animation rather than instantly.

<script>
$(function(){
     $(document).on( 'scroll', function(){
         if ($(window).scrollTop() > 100) {
            $('.scroll-top-wrapper').addClass('show');
        } else {
            $('.scroll-top-wrapper').removeClass('show');
        }
    });
     $('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>

 

Next is to add the CSS styles for the button.  Colors, sizes, and other properties can be changed, but the important styles are the opacity properties, position and visibility.


<style>
.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #370673;
    color: #2323F5;
    width: 75px;
    height: 75px;
    line-height: 48px;
    right: 100px;
    bottom: 50px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
    background-color: #59E17B;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
    opacity: 2.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
}
</style>

</head>

 

Lastly is the HTML markup.  The codes may change if using an icon font, an image, or text.  For this sample we are using the icon font.  You will notice the name of the icon is has "fa" which means Font Awesome that we are using in this sample. 


<body>
<div class="scroll-top-wrapper ">
    <span class="scroll-top-inner">
        <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </span>
</div>
</body>

To put the scroll-to-top icon to a single page use the HTML module.  Within the builder drag the HTML module then drop it at the bottom of the page and paste the code.  Save and publish when you're done.

Have more questions? Submit a request