Help with Scroll to Top sticky button Please.

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
EYESCREAM
 
 
Posts: 4
Joined: Tue May 12, 2020 12:20 pm
Contact:

Help with Scroll to Top sticky button Please.

Post by EYESCREAM » Wed May 13, 2020 1:22 pm

Hi,
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>

User avatar
Pablo
 
Posts: 20532
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with Scroll to Top sticky button Please.

Post by Pablo » Wed May 13, 2020 1:27 pm

You do not need a custom script for this.

You can use bookmarks to implement 'Scroll Up' functionality, like demostrared in many of the available templates:
https://wysiwygwebbuilder.com/templates9.html

or else use this extension:
https://wysiwygwebbuilder.com/goup.html

Post Reply