Go-top button issues

Hi there,
My go-top button seems to only appear on 2 of my pages but not my home page? I also need to change the colours please. Its just appearing as a white box.
My CSS is very limited.

Thanks,
Sarah.

http://bailyconstructions.com.au

Hello Sarah,

You can manage the color of it with the below CSS code:

    .go-top.show {
      background-color: #fff000;
    }

    .go-top.show:hover {
      background-color: #ff0000;
    } 

To apply it to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Thanks for the prompt reply Kharis! Any idea why the button is only showing in my About and Contact pages and not the homepage?

Thanks,
Sarah.

On my screen, the go to top button appears on your homepage and other inner pages. Maybe you’re using wider screen that’s resulting the document of your site a bit shorter. The theme’s JS code manages the button visibility – it’ll appear after more than 800px down scroll. To change it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      $(window).scroll(function() {

        if ( $(this).scrollTop() > 100 ) {
            $('body .go-top').addClass('show-btn');
        } else {
            $('body .go-top').removeClass('show-btn');
        }

      });

    })(jQuery);
  1. Update

Regards,
Kharis

Thanks Kharis, for some reason its not allowing me to install it, but I’ll try again later and see how I go.

Thanks again :slight_smile:

Can i add a white border to the go top button?

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .go-top {
      border: 1px solid #fff;
    }

Regards,
Kharis

Kharis hi,

Hope you are well. I have the same issue, although I added your JS code:
https://zanteskysuites.com/

Thank you,
Yannis

Hi Yannis,

I checked the source code of your website and you are currently running a child theme. Please check your child theme’s footer.php file and ensure this line of code presents.

<a class="go-top"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-chevron-up', true ); ?></i></a>

Regards,
Kharis
aThemes Support

Kharis hi,

Thanx for the quick fix, I finally found out though that the default footer of the child theme is overridden by Elementor footer. So I added your code at an HTML element in the Elementor footer template. It partially worked since:

  1. the whole button was displayed the same color. This I fixed by replacing your code with an older piece of code I found in a sydney child footer template I already used in another website:

  1. the button is only displayed when I scroll down to the very end of the footer (not during my scroll down). I tried to fix this by using Custom CSS & JS plugin and adding the following code:
    (function(jQuery){
          jQuery(window).scroll(function() {
            if ( jQuery(this).scrollTop() > 100 ) {
                jQuery('body .go-top').addClass('show-btn');
            } else {
                jQuery('body .go-top').removeClass('show-btn');
            }
          })
    })(jQuery);

Unfortunately this did not work… Any ideas?

Thanx in advance
Yannis

Try replacing 100 to any lower number in this line:

   if ( jQuery(this).scrollTop() > 100 ) {

Regards,
Kharis
aThemes Support

Kharis hi,
Tried that, even with 0, still the javascript seems not to be working.
Cheers,
Yannis

Hi Yannis,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    a.go-top.show-btn {
      z-index: 99999 !important;
      bottom: 100px !important;
      right: 20px !important;
      opacity: 1;
      visibility: visible;
    }

Regards,
Kharis
aThemes Support