Docs

[Ben]

Hi,

I am trying to create a button that will auto scroll to a new section of the same page. I tried to follow the instructions on this thread

https://community.theme.co/forums/topic/make-a-button-that-scrolls-down-when-pressed/

,but didn’t seem to have the same success as that person.

Could you maybe provide another example of what should be entered into the button url to initiate the scrolling function?

For example, on my homepage I would like to have a button that scrolled down to the contact us section. The name of that content band is “Contact Us.” How would you type that into the url section?

here is my site:

http://ott.ua.edu/

Thanks in advance for your help.

-Ben

[Friech]

Hi Ben,

Thanks for writing in! I’m not seeing you put a custom ID on that section, it has the default ID #x-section-5.

Please add this on your custom CSS

.x-slider-scroll-bottom-above {
            color: #ffffff;
            border-color: #ffffff;
          }
          .x-slider-scroll-bottom-above:hover {
            color: #ffffff;
            border-color: #ffffff;
          }

And this on your custom JavaScript

jQuery(function($){ $('.x-slider-scroll-bottom-custom').click(function(e){
e.preventDefault(); 

    $('html,body').animate({
      scrollTop: $('.page-id-3336 #x-section-1').offset().top + $('.page-id-3336 #x-section-1').outerHeight() - $('.x-navbar').height()

    },700 ,'swing');

}); });

And this is the button that scroll your page when clicked

<a href="#x-section-5" class="x-slider-scroll-bottom x-slider-scroll-bottom-custom x-slider-scroll-bottom-above bottom center"><i class="x-icon-angle-down"></i></a>

You can paste that on a RAW content element. Replace the #x-section-5 if you want this to scroll on different section.

Hope it helps, Cheers!

[Author]

Posts