VISUAL COMPOSER ROW SCROLL

Hello!

I´d like to make an internal link between a button and a row (in the same page). I gave the row an ID (#scroll). How can I do for linking the button and the row with a smooth scroll?

Thanks a lot!

Hello,

There is no such option in our theme. But you can achieve it easily using this simple JS snippet. Add it to the Custom JS and replace selectors classes for button and for the row

jQuery(".buttonCustomClass").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#scroll").offset().top - 50
    }, 2000);
});

Regards

Thanks for your answer.
I don´t understand how can I do this: “Add it to the Custom JS and replace selectors classes for button and for the row”. Can you send me a screen or can you explain it for a dummy like me, hehe…

thanks a lot!

You can add this code to the Custom JS area in Theme Settings. In the code you will find two selectors:

1. for the button link jQuery(".buttonCustomClass")

2. and for the row with ID jQuery("#scroll")

So just create a button with class buttonCustomClass and row with id scroll and use this code

jQuery(".buttonCustomClass").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#scroll").offset().top - 50
    }, 2000);
});

Regards

So, I´ve just pasted this code in Global Custom JS (theme settings). Then I go to the page that I created with Visual Composer. I assign to the row ID: #scroll. Next point, how can I create with Visual Composer a buttonCustomClass?

Sorry…

Then, you just need to add some button or link. For example you can use our them “Button” element and set extra class to be “buttonCustomClass”

I tried but it´s not working. I attach a picture where you can see the code, the button configuration and the row configuration. What´s wrong?

Page is: https://empapelarte.es/newoptimizacion/

Sorry, I didn´t send you the picture. Here it is…

This is the picture… 😉

Attachments:

You must be logged in to view attached files.

You need to remove # before ID in the row settings.

Is there any way to make all anchor links with # have a smooth scroll? or all links with certain class. instead of putting a separate snippet for every row ID?

I tried to do according many tutorials online including this one but nothing works.

Please help.
Thank you!

Hi,

What exactly code did you add from the article? Could you please provide us a link where we can see this added to your website?

Regards

Hi there, I’d like also to me to add a smooth scroll on some buttons or icons, but that code do not work on Basel. Could you help me please?

Hello,

Our theme does not have such options. You will need to customize.

Best Regards

I know that. You was really available on december. What happen? 😀 I tried the code that you suggested, but it doesn’t work.

Could you please send us a link where you placed the code? Send us all the screenshots with steps you performed according to our instructions. We will check what you did wrong.

The button is on the 2 arrows that points down. The scroll is working (as default), but not the smooth feature. Thank you!

Try to replace JS code with this one

jQuery(".buttonCustomClass").click(function(e) {
    e.preventDefault();
    jQuery('html, body').animate({
        scrollTop: jQuery("#scroll").offset().top - 50
    }, 2000);
});

Unfortunately it not work.

It works well for us https://gyazo.com/2749301564a4b920655796a0369ae617

I can’t see any smooth scroll on Safari and also on Chrome.

Strange, but it works for us. We don’t have other solutions for this.

[Author]

Posts