[martytbParticipant]

Hi there, I’m trying to help out a client, he wants a big image to start the homepage with. A button should have a ‘read more’ option so the whole thing scrolls down to the rest of the content. I almost figured out how to do this but the ‘Scroll below slide’ function in Slider Revolution doens’t slide down far enough! Is there a way to make sure the company logo is at the top of the page?

The website: http://tandartsbeck.yescando.nl/

Thanks!

[ChristianModerator]

Hey there,

You might have setup the offset incorrectly. Please give us access to your WordPress admin so we could check your setup.

Thanks.

[martytbParticipant]

This reply has been marked as private.

[JackKeymaster]

Hi there,

Thanks for writing back! 🙂

You’ll need to add some custom Javascript to calculate the scroll position on click to the section you want, you could try the code in the following post here https://community.theme.co/forums/topic/getting-the-anchor-link-in-revolution-slider-to-scroll-further-down-the-page/#post-80479 and just change the div ID/class as needed. 🙂

Let us know if you have any problems.

Thank you!

[martytbParticipant]

I think I’ve done as you said, added the class .x-logobar, but it still doesn’t scroll down far enough?

[ZeshanMember]

Hi there,

I’ve checked your site and looks like you are using a custom scroll bottom button inside your Revolution Slider. In that case, use this jQuery code instead under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.x-slider-container.top .tp-scrollbelowslider').off('touchstart click');
  $('.x-slider-container.top .tp-scrollbelowslider').on('touchstart click', function(e) {

    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('.x-slider-container.above').outerHeight()
    }, 850, 'easeInOutExpo');

  });
});

Thank you!

[martytbParticipant]

🙁 I’ve added the javacript code, but when I click the button it still doesn’t scroll down far enough! 🙁

[ZeshanMember]

Hi there,

Please try this code instead:

jQuery(document).ready(function($) {
  $('.x-slider-container.above .tp-scrollbelowslider').off('touchstart click');
  $('.x-slider-container.above .tp-scrollbelowslider').on('touchstart click', function(e) {

    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('.x-slider-container.above').outerHeight()
    }, 850, 'easeInOutExpo');

  });
});

Thank you!

[martytbParticipant]

Exactly the same effect as the other one, nothing changes.

[ZeshanMember]

Hi there,

I’ve updated the code from your Customizer to following:

jQuery(document).ready(function($) {
  setTimeout(function(){
    console.log('time out...');
    $('#slide-1-layer-5').off('touchstart click touchend mouseenter mouseleave');
    $('#slide-1-layer-5').on('touchstart click', function(e) {

      console.log('clicked');
      e.preventDefault();

      $('html, body').animate({
        scrollTop: $('.x-slider-container.above').outerHeight()
      }, 850, 'easeInOutExpo');

    });
  }, 500);
});

The button should take to the correct place now.

Thank you!

[martytbParticipant]

THANKYOOOUUU! Omg I love you guys 😀 Thanks again for all the replies! 🙂 Its working perfectly!

[Rue NelModerator]

Hello There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[martytbParticipant]

Hiya, you guys helped me out last time but I seem to have broken something :/

I played around with the slider layers and put the button to scroll down in the static global layer. It still seems to have the same trigger and action and the custom code you guys provided in December is still in de Customizer (untouched).

What am I forgetting? Do I need to add a class somewhere? Thanks in advance!

[LelyModerator]

Hi There,

Upon checking, the button have different class now. That’s why the javascript above will not work. Please try to update above code to this:

jQuery(document).ready(function($) {
  setTimeout(function(){
    console.log('time out...');
    $('.rev-btn').off('touchstart click touchend mouseenter mouseleave');
    $('.rev-btn').on('touchstart click', function(e) {

      console.log('clicked');
      e.preventDefault();

      $('html, body').animate({
        scrollTop: $('.x-slider-container.above').outerHeight()
      }, 850, 'easeInOutExpo');

    });
  }, 500);
});

Hope this helps.

[Author]

Posts