Go to Top Button not working

[ruenel]

Hey There,

I am another staff checking this thread. Is your Go to top button still not working? I have check your site and I found out two things:

1. The “go to top” is coming a from 3rd party plugin “Scroll Top Advanced”. I would highly recommend that you contact the creators of this plugin. They should be able to help you how to properly set up this plugin and work with the theme.
2. There are so many custom JS in the page. It could be cause by a JS conflict. I would highly recommend that you temporarily remove them and place it back one after the the other to find out which of which is causing the issue.

Please let us know how it goes.

[angelofgod]

Hey RueNel,
i was hoping you would respond since you were giving me the code and i need to speak about this issue with you,
please refe to this answer:

Go to Top Button not working

1. i have removed the 3rd plugin “Scroll Top Advanced” and now i am using the X-Theme scoll top option.
2. The Custom JS is the JS you gave me in this thread https://theme.co/apex/forum/t/go-to-top-button-not-working/29471/19

[ruenel]

Hello There,

Thanks for writing in! I have made some necessary changes to the scroll to top button and it is working correctly now. When you click on it, it goes to the navbar and not on top of the page.

Please check your site now.

[angelofgod]

Oh great! Thanks!
Can you please tell me what are the changes that you made so i will remember for next time? please

[ruenel]

Hello There,

It’s good to know that it is now working for you.

The changes I made is in your child theme’s functions.php file. I have change the value of the position of the top anchor when there is a slider above the masthead present on the page. I used this code:

// Custom Scroll Top Anchor
// =============================================================================

if ( ! function_exists( 'x_scroll_top_anchor' ) ) :
  function x_scroll_top_anchor() {

    if ( x_get_option( 'x_footer_scroll_top_display' ) == '1' ) : ?>

      <a class="x-scroll-top <?php echo x_get_option( 'x_footer_scroll_top_position' ); ?> fade" title="<?php esc_attr_e( 'Back to Top', '__x__' ); ?>">
        <i class="x-icon-angle-up" data-x-icon="&#xf106;"></i>
      </a>

      <script>

      jQuery(document).ready(function($) {

        var windowObj            = $(window);
        var body                 = $('body');
        var bodyOffsetBottom     = windowObj.scrollBottom();             // 1
        var bodyHeightAdjustment = body.height() - bodyOffsetBottom;     // 2
        var bodyHeightAdjusted   = body.height() - bodyHeightAdjustment; // 3
        var scrollTopAnchor      = $('.x-scroll-top');

        function sizingUpdate(){
          var bodyOffsetTop = windowObj.scrollTop();
          if ( bodyOffsetTop > ( bodyHeightAdjusted * <?php echo x_get_option( 'x_footer_scroll_top_display_unit' ) / 100; ?> ) ) {
            scrollTopAnchor.addClass('in');
          } else {
            scrollTopAnchor.removeClass('in');
          }
        }

        windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
        sizingUpdate();

        scrollTopAnchor.click(function(){
          var vtop = 0;
          if ( $('.x-slider-container').length > 0 ) {
            vtop = $('.x-slider-container').height();
          } 

          $('html, body').animate({ scrollTop: vtop }, 850, 'xEaseInOutExpo');
          return false;
        });

      });

      </script>

    <?php endif;

  }
  add_action( 'x_after_site_end', 'x_scroll_top_anchor' );
endif;

Hope this explains it.