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;
}
*/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>
*/catalog/view/theme/themename/template/common/header.twig
I hope this helps someone!
Regards,
Sean