I don't do code (only dabble via inspect element/googling Q's/testing code concepts until I figure something out) I mostly add little tweaks to get my desired site effect. At current my site is created on another platform, but I really detest templates as I feel they restrict me too much (of which my current platform as well as other platforms are based around). I've worked with WWB-8 and versions before, but then switched to other platforms when I wanted an easier way to do an ecommerce shopping cart situation. Here I am again, updated to version 15 to see if I can create the site I want and host somewhere else for a little less$ but still have more control over a Template-less site I've created.
My question is, can someone help me figure out how to add the Scroll Up feature that I have implemented on my current site to my WWB15 site project? I figured out most of the code years ago and then had a customer support person help me adjust it for the platform I am currently using (as they seem to have proprietary coding and many dif. CSS/SCSS files to go into to add the code bits), unfortunately, I cannot seem to figure out if the code is correct to add to WWB15, and VERY confused as to where to add the different bits of code into what exact parts of the Html areas. I've spent too many hours going in circles over something (that if I were a coder I am sure would have been SUPER easy to figure out where and how). Any help would be appreciated. Here is my current site (where I have the Back To Top button that I love, and the sticky Menu that I also need to figure out to get it the same as on my current site... but that may be a new post for help with that if the current toolbox or WWB extensions can't be utilized the same).
Please note, I searched online for sites, code sites, in the forum etc, but just thought I would directly ask if anyone here is code savvy to take a look and see exactly what and where I would need to add the code to. THANKS IN ADVANCE!!!
My Site in question:
https://eyescreamjewelry.com/
I will try to add all the code I can find on the Back To Top button from my current site (although not sure if I will have it all as again, I have to go into many css/scss pages to look for this code specifically). Also note, the code may not be in the appropriate order, Just copying what I could find.
Code: Select all
<a href="#" title="Back to the top" class="back-to-top">
<i class="fa fa-chevron-circle-up custom fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
.back-to-top {
position: fixed;
bottom: {{ position_from_bottom }};
right: 0px;
text-decoration: none;
color: #dea2a2;
font-size: 18px;
padding: 0.3em;
display: none;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
z-index: 60000;
}
.back-to-top i {
vertical-align: middle;
}
.back-to-top span {
padding-left: 0.5em;
}
.back-to-top i + span {
padding-left: 0;
}
.back-to-top:hover {
text-decoration: none;
color: #dea2a2;
}
</style>
<script>
window.onload = function() {
jQuery(function($) {
var offset = {{ vertical_offset_for_trigger }};
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
}
else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
e.preventDefault();
$('html, body').animate( { scrollTop: 0 }, duration);
return false;
})
});
}
</script>