[AminAbedParticipant]

Hi,
I have activated the anchor option when I scroll down more than half way through the website.
I was wondering how I can edit the behavior of the anchor so clicking on it would take me to a specific section of the website, not to the very top?
I have the one page setup with tags for each specific section.
At the very top, I have a slider video. Then comes my first main section. I want clicking on the anchor take me up to the first main section instead of the slider.
Best,

[Rue NelModerator]

Hello There,

Thanks for writing in! Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-SCROLL-TOP.PHP
// -----------------------------------------------------------------------------
// Output for the scroll top button.
// =============================================================================

?>

<?php 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" href="#top" title="<?php esc_attr_e( 'Back to Top', '__x__' ); ?>">
    <i class="x-icon-angle-up" data-x-icon=""></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(){
      $('html,body').animate({ scrollTop: 0 }, 850, 'easeInOutExpo');
      return false;
    });

  });

  </script>

<?php endif; ?>

Please do make your changes by replacing the href="#top" to something else like href="#your-section" from the code above.

3] Save the file named as _footer-scroll-top.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

We would loved to know if this has work for you. Thank you.

[AminAbedParticipant]

Hi,
Thanks for helping me out.
I followed what you suggested and it kinda works but not quite.
The problem is that when the anchor is clicked on, it would take me all the way back up then scrolls down to the specified section.
Do you have any ideas how I can fix this issue?
Best,
Amin

[AminAbedParticipant]

Also, I have a navbar as well as a topbar on my website.
is it possible to tag my topbar so the anchor would actually scroll up to the topbar( carrer, news, orders section)?
the url is http://www.uberpcb.com
thanks,

[Rue NelModerator]

Hello Amin,

The code given above, find this block:

scrollTopAnchor.click(function(){
   $('html,body').animate({ scrollTop: 0 }, 850, 'easeInOutExpo');
   return false;
});

You need to replace that block using this code:

scrollTopAnchor.click(function(){
  var H = $('.x-slider-container.above').height();
  $('html,body').animate({ scrollTop: H }, 850, 'easeInOutExpo');
  return false;
});

Please let us know if this works out for you.

[AminAbedParticipant]

Thank you very much!
It’s much better now, however it scrolls up to the topbar and then scroll down to the navbar.
You can see how it behaves at uberpcb.com.
Is there any way to make it stop at topbar (where career, news, my order are)?
Best,

[ZeshanMember]

Hi Amin,

I’ve checked your site and scroll top anchor is correctly scrolling to the topbar. Please see this screencast: http://recordit.co/FDwtKSMoMs. Would you mind confirming the issue again?

Thank you!

[AminAbedParticipant]

Hi,
The anchor I was talking about and Rue was helping me with is the one that appears when you scroll down on the bottom right corner.

[Rue NelModerator]

Hello Again,

Since you want the topbar include with your navbar and positioned as fixed on top of the page, please update your JS code in the customizer, Appearance > Customize > Custom > Javascript and use this instead:

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

   // Move the topbar and make it Fixed as well
   $('.home .x-topbar').insertBefore('.home .x-navbar-inner');

   // Custom accordion events
   $('.x-accordion-toggle[data-parent]').click(function() {
    var $this = $(this);
	var parent = $this.parent();
	var get_child = parent.children();
	var scrollId = get_child.attr('href');
    var accordion = $this.closest('.x-accordion');

    accordion.find('.x-accordion-toggle:not(.collapsed)').addClass('collapsed');
    accordion.find('.accordion-body.collapse.in').removeClass('in');

    if(!$this.hasClass('collapsed')) {
      $this.addClass('collapsed');
    }
    $this.parent('.x-accordion-heading').siblings('.accordion-body.in').removeClass('in');
  });
  
})(jQuery);

This should resolve the last issue that you are having. Please let us know if this works out for you.

Thank you.

[AminAbedParticipant]

Hi,
I think I did not get my point across clearly.
I don’t want the topbar be attached to the navbar and have them fixed on top of the page.
The fix you gave me for the anchor scrolls up to the top bar and then scrolls back down to the navbar.
I want to have it scroll up to the top bar and then stay there. From then on, if user decides to scroll back down, I want the topbar to disappear, like it does right now.
Please take a look at the behavior right now, I think it helps me to get my point across easier.
http://www.uberpcb.com

[Paul RModerator]

Hi,

To achieve that, you can add this in your custom > javascript in the customizer

 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 * 0.5 ) ) {
        scrollTopAnchor.addClass('in');
      } else {
        scrollTopAnchor.removeClass('in');
      }
    }
    windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
    sizingUpdate();
    scrollTopAnchor.off('click');
    scrollTopAnchor.click(function(){
      $('html,body').animate({ scrollTop: $('.x-slider-container.above').height() }, 850, 'easeInOutExpo');
      return false;
    });
  });

Hope that helps.

[AminAbedParticipant]

Thank you very much!
That did the trick!

[ThaiModerator]

You’re very welcome 🙂

If you need anything else please let us know.

[Author]

Posts