[SOLVED] Opencart Scroll To Top No Extension Required

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

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href="catalog/view/theme/default/stylesheet/font-awesome.css" rel="stylesheet">

/*
@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/

seanstorm100 wrote: ↑

Sun Dec 01, 2019 4:40 am

Hi All,

This is how I enabled scroll to top on my Opencart v3 without an extension.

Please note that I am not a professional coder and you should use the below at your own risk. For the professional coders out there you can comment on any corrections that need to be made. I also do not own the codepen below. Please read the licence.txt file before use. Please back up all related files, possibly your server before making changes.

1) Downloaded this CodePen: https://codepen.io/rdallaire/pen/apoyx
2) Extract the file.
3) Go to the dist folder and rename the JS File from script.js to scroll-top-script.js so it can be easily identified in the future.
4) Add this code:

Code: Select all

/* Scroll to top */

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

To the CSS file located here:
*/catalog/view/theme/default/stylesheet/styleshee.css. Please note that you can use a custom made css file so your changes are saved after an OC upgrade.

5) Upload scroll-top-script.js to */catalog/view/javascript/

6) Then add:

Code: Select all

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script  src="catalog/view/javascript/scroll-top-script.js"></script>

To this file:
*/catalog/view/theme/themename/template/common/header.twig

I hope this helps someone!

Regards,
Sean