How to add a Scroll-to-top button in OpenCart 2.x

The scroll to top button improves your website navigation, brings a nice touch in the user interface and refines the overall design of your store. As you may have already realized, having a scroll to top button is one of these little things that your website doesn’t necessary need, but nonetheless, are enhancing the user experience and the slickness of your website. 

In this blog post we will show you how you can easily and quickly add a scroll button to your pages in your OpenCart 2.x web store.


Get the modification for OpenCart 3.x here!


Choose Scroll-To-Top-Button Image

We shall start with choosing the image for the button. In fact, you can use any image of your choice, but keep in mind that it should remind its purpose, otherwise the button will be quite useless. There are plenty of scroll-to-top and arrows icons in google.com which you can download. Alternatively, you can make one your own. After you have chosen your image, you will need to upload it in the following directory in your server: catalog/view/theme/your_theme_name/image/. The image chosen for this tutorial is named ‘scroll.png’ (View Here) and looks like this:

Create scroll-to-top.js file 

The next step after uploading the image, is to create a JavaScript file which will add the button to your pages and will ‘tell’ it what to do. For this purpose you will need to locate the following directory in your server: catalog/view/javascript and create a new file using a text editor by your choice. The file has to be named in the following way: nameofyoupreference.js. In our example, we will name the file scrolltotopdemo.js. 

After creating the empty file you need to copy and paste the following 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()
* Keep in mind that you should replace the scroll.png with the name of your image in the following code snippet:
<img src="catalog/view/theme/default/image/scroll.png" style="width:50px; height:50px" />

Add the file to your pages

In order to add the file to your pages, you need to make a references to it. To do that, you’ll need to go to catalog/view/theme/your_theme_name/template/common/header.tpl and add the following code snippet before the closing </head> tag:

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

* Keep in mind that you should add the name of the JavaScript file that you have just created instead of ‘scrolltotopdemo.js’. Make sure to SAVE and UPLOAD the file to your server.

Modify the Code

In this section we will concentrate on the ways in which you can modify the JavaScript file and make the button look and behave in the way you desire.

Size

In order to change the size of your image you will need to replace the 50px with the desired image dimensions in the following code snippet:

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

Keep in mind that the size of the button should not be too large or too small for both desktop computers and mobile devices.

Position

With the current set up, the button is with a fixed positioning and is displayed in the bottom left corner of your page. 

 

If you want to change the positioning, you need to modify the numbers here: 

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

In our script, the offsetx is responsible for the distance between the button and the right border of your page and the offsety for the distance to the bottom of the page. If you want to stick the button to the very bottom right edge of the page, for example, you will need to set the offsetx and offsety to 0.

Switch on/off

As you will notice, the button doesn’t appear right when the page is loaded, but when you scroll down a bit. If you would like to increase or decrease the scrollable distance before the button appears, you will need to increase or decrease, the number 200 set for startline in the following line:

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

Scrolling

The same line contains the settings for the scrolling functionality. 

  • Scrollto:0

          Sets the page to scroll back to the very top. If you replace the 0 with let’s say 300, the page would not scroll to the top, but to 300px from the top.

  • Scrollduration:1000

          This sets the time for which the page will scroll to the top. The number 1000 stands for 1000 milliseconds or 1 second. If you increase the number, the scrolling will be slower, and vice versa.

  • Fadeduration:[800, 500]

          These numbers set how long the button fades in and out. The first number sets the time for fading in when the button is appearing and the second number, sets the fading out duration when the button is disappearing. As with the scrollduration setting, the numbers stand for time measured in milliseconds.

Mouse over

Currently the button is fading in, but not to its full opacity, but to 0.5 as set in the following code: 

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

This means that the button is half transparent. When you hover over it, however, it becomes fully solid and it creates an effect of darkening the color. When the mouse is removed from the button, it becomes half transparent again or it lightens. This is achieved with the following code:

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

If you would like to change the transparency you can change the numbers 1 and 0.5. Keep in mind that 1 stands for fully solid and 0 for fully transparent. Or in other words, the smaller the number, the more transparent the image is and vice versa. If you would like to remove the hover effect, you can go ahead and delete these two lines of code.

You will also notice that when the mouse is over the button, a text field appears: “Scroll to Top”. In order to change that, you will need to modify the text in the quotes in the following code snippet:

.attr({title:'Scroll to Top'})

Default Display:

Mouse Hover Effect:

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time

Trending blogs

comments powered by Disqus