First of all > goto AdminCP > System > Site Features > Plugins >Get Ready to install the below plug-in i have uploaded<
Smooth Scroller.xml
>> now what are you waiting for, install the plugin
now after installation, enable and edit its features as want
After this Goto > Customization > Appearance > Themes > Choose the theme where you want this smooth scroller a.k.a back2top button modified and click on > Edit HTML and CSS button
Now after this goto the CSS Tab and find smoothscroller.css open it and check the code, since you are seeing the code press CTRL + A on your keyboard and replace the already lines of css code with below one
.cjScrollToTop {
display:none;
cursor:pointer;
background-color: #5c84a7;
opacity: 0.6;
position:fixed;
bottom:15px;
right:15px;
width:44px;
height:45px;
padding:5px;
line-height:0 !important;
z-index:9000;
border-radius:50px;
box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.28);
}
.cjScrollToTop:hover {
background-color: #5c84a7;
opacity:1;
filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
.cjScrollToTop > a {
color: {theme="normal_button_font"};
font-weight:bold;
font-size:14px;
display:block;
padding: 10px;
}
@media screen and (max-width: 979px) {
.cjScrollToTop {
bottom:15px !important;
right:15px !important;
width:44px;
text-align: center;
}
#elCopyright {
margin-bottom:45px !important;
}
}
Conclusion
Before > After >
So what's new with this modification:
Transparent when not on hover
Color change from transparent to full
yeah hover thingy again
box shadow
smooth circular design
responsive for mobile phone view also
Bonus code </> if you want different a bit than this above
Just replace the code, easy
.cjScrollToTop {
background-color: #3498db;
position:fixed;
bottom:15px;
right:15px;
width:44px;
height:45px;
padding:5px;
line-height:0 !important;
z-index:2000;
border-radius:50px;
}
.cjScrollToTop:hover {
background-color: #e74c3c;
opacity:1;
filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
.cjScrollToTop > a {
color:#fff;
font-weight:bold;
font-size:14px;
display:block;
padding:10px;
}
@media screen and (max-width: 979px) {
.cjScrollToTop {
bottom:15px !important;
right:15px !important;
width:44px;
text-align: center;
}
#elCopyright {
margin-bottom:45px !important;
}
}
find the conclusion of this one by yourself, xD have fun