How to Add a Free Scroll-to-Top Button in OpenCart 3.x

Scroll to top buttons are quite common these days and a very useful thing to have.

They are most often found at the right bottom of the page when you start scrolling down.

It can be either an arrow, or a button with text, you got plenty of options.

Let’s show you how to give your OpenCart 3.x store a scroll to top button and make one tiny step forward to a better customer experience in your site.

Get the modification for OpenCart 2.x here!

Step 1

Find yourself a scroll to top image for the button and upload it in your store.

You can use any image you choose, or create your own image using a tool like Canva.

We will be using this one for our example:

Is you image ready? Awesome.

Now, let’s upload it to your server. It should be in the following directory:

your_store/catalog/view/theme/your_theme/image

Step 2

Create your JavaScript file.

This file will actually add the Scroll-to-top button to your store pages and ‘tell’ it how to behave.

Now, locate this directory:

catalog/view/javascript

Create a new file there using a text editor. Give it a name like scrolltotopdemo.js.

Copy this code:

var scrolltotop={
    setting: {startline:200, scrollto: 0, scrollduration:1000, fadeduration:[800, 500]},
    controlHTML: '<img src="catalog/view/theme/default/image/scroll.png" style="width:50px; height:50px" />', 
    controlattrs: {offsetx:20, offsety:75}, 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:0.5}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    
    
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll to Top'})
                .mouseenter(function() { $(this).css("opacity", "1");}) 
                .mouseleave(function() { $(this).css("opacity", "0.5");})
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') 
                mainobj.$control.css({width:mainobj.$control.width()}) 
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

...and paste it in the scrolltotopdemo.js file you created.

Important! Replace the name of your scroll.png with the name of your image:

<img src="catalog/view/theme/default/image/scroll.png" style="width:50px; height:50px" />

Step 3

Add the file to your store.

To have that file active on the pages of your OpenCart website, you need to reference it.

Open your:

catalog/view/theme/your_theme_name/template/common/header.twig

And add the following code snippet before the closing </head> tag:

<script src="catalog/view/javascript/scrolltotopdemo.js" type="text/javascript"></script>

Important! Add the name of your JavaScript file where you see the name of our ‘scrolltotopdemo.js’ file.

Now just Save and Upload the file to your server.

Step 4

Customize your scroll-to-top button by modifying the code. Here’s what you can tweak.

Size

To modify the size of your button, you need to modify this part of the code in your JavaScript file:

controlHTML: '<img src="catalog/view/theme/default/image/scroll.png" style="width:50px; height:50px" />

You have a 50px size of the current button. You can change this to anything you find fitting for your store’s design on desktop and mobile.

Position

With the current modification, your button will be fixed in the bottom left corner of your store.

If you want to adjust that, you need to modify the numbers in this part of the code:

controlattrs: {offsetx:20, offsety:75}, 

Start Line

You’ll notice that the button doesn’t appear right away when your page loads.

You need to start scrolling down so the button can appear.

You can set the scroll distance required for the button to appear in this line of code:

setting: {startline:200, scrollto: 0, scrollduration:1000, fadeduration:[800, 500]},

The startline: number is currently at 200, but you can switch it to anything you want.

Scrolling

There is a way for you to control the scrolling functionality of the modification and edit the place where you want the button to take you to, or the scroll speed.

setting: {startline:200, scrollto: 0, scrollduration:1000, fadeduration:[800, 500]},

• scrollto: 0 gives you control of the exact spot you want to scroll button to lead to when clicked.
• scrollduration:1000 is the time it takes for the scroll to take you to the top. 1000 stands for milliseconds. Increase the number to slow down the scroll, or go below 1000 to make it faster.
• fadeduration:[800, 500] lets you edit the fade in and fade out duration. Again in milliseconds.
   

Hovering

Currently, the scroll button is fading in, but not to its full opacity. It’s set to 0.5 in this part of the code:

if (this.state.shouldvisible && !this.state.isvisible){
     this.$control.stop().animate({opacity:0.5}, this.setting.fadeduration[0])
     this.state.isvisible=true
}

This makes the button half transparent. When you hover over it, it becomes solid. This is controlled by this part of the code:

.mouseenter(function() { $(this).css("opacity", "1");}) 
.mouseleave(function() { $(this).css("opacity", "0.5");})

Important: keep in mind that 1 stands for fully solid and 0 means fully transparent.

The results!

The button now appears in our test store and it's working flawlessly.