[martopiaParticipant]

Hi folks,
I’ve really been enjoying using the X theme over the last couple weeks. I’m definitely going to try to utilize this theme as much as possible for my future projects.

Here is a link to our project: http://react350.com/

I’ve been trying to add smooth scrolling links to a layer in a Revolution slider.
I’ve attempted to implement the solutions included on these links, but haven’t had any luck.
https://theme.co/x/member/forums/topic/smooth-scrolling-with-non-menu-anchor-links/
https://theme.co/x/member/forums/topic/smooth-scrolling-anchor-links-and-linking-to-tabs-on-other-pages/
https://theme.co/x/member/forums/topic/speed-of-anchor-scrolls/

Would you be able to help me find out what I am doing incorrectly?
Thanks so much for your help!

[Paul RModerator]

Hi,

Thanks for writing in!

You can add this under Custom > Javascript in the Customizer.

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

  var $body           = $('body');
  var $bodyHeight     = $body.outerHeight();
  var $adminbarHeight = $('#wpadminbar').outerHeight();
  var $navbarHeight   = $('.x-navbar').outerHeight();

  $('.page-id-182 .rev_slider a[href^="#"]').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight + 1
    }, 850, 'easeInOutExpo');
  });
});

Hope that helps.

[martopiaParticipant]

Thanks, however it seems to completely disable the links all together.

Should the links be targeting or div IDs?

Thanks again!

[John EzraMember]

Hi there,

Thanks for updating the post. Please try change the “name” to “id”. it should work.

Example:

<a name="learn"></a> => <a id="learn"></a>

We have tested this in browser and it is working. Hope this helps!

[martopiaParticipant]

Thank you so much! It works great!

[ZeshanMember]

You’re welcome! 🙂

[derrickParticipant]

This reply has been marked as private.

[RadModerator]

Hi Derrick,

It will only work for button as a link, like <a href="#home-tech">Programs</a>. The button from slider is not a button, but just a normal layer styled as a button.

Please add new slider layer and add this, <a href="#home-tech" class="x-btn">Programs</a> and test it.

Cheers!

[Author]

Posts