Home Forums Basel support forum VISUAL COMPOSER ROW SCROLL

VISUAL COMPOSER ROW SCROLL

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #9458

    empapelarte
    Participant

    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!

    #9460

    Artem Temos
    Keymaster

    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

    #9461

    empapelarte
    Participant

    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!

    #9463

    Artem Temos
    Keymaster

    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

    #9467

    empapelarte
    Participant

    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…

    #9473

    Artem Temos
    Keymaster

    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”

    #9509

    empapelarte
    Participant

    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/

    #9510

    empapelarte
    Participant

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

    #9511

    empapelarte
    Participant

    This is the picture… 😉

    Attachments:
    You must be logged in to view attached files.
    #9515

    Artem Temos
    Keymaster

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

    #26618

    codecom
    Participant

    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!

    #26653

    Artem Temos
    Keymaster

    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

    #67595

    Giulio
    Participant

    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?

    #67605

    Hello,

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

    Best Regards

    #67606

    Giulio
    Participant

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

    #67649

    Artem Temos
    Keymaster

    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.

    #67839

    Giulio
    Participant

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

    #67840

    Artem Temos
    Keymaster

    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);
    });
    #67841

    Giulio
    Participant

    Unfortunately it not work.

    #67842

    Artem Temos
    Keymaster
    #67843

    Giulio
    Participant

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

    #67900

    Artem Temos
    Keymaster

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

Viewing 22 posts - 1 through 22 (of 22 total)