2

I'm using Wordpress Visual Composer and would like a button to have a smooth scroll down to a specific section on the same page.

I've explored the standard button element's "insert inline onclick javascript action" with anchor IDs and code from many other similar Q&As, but have had no luck. Does anyone have the answer specifically to Wordpress Visual Composer?

(Below are screenshots of how I tried to implement @Frits suggestion.)

Button href

Raw JS block

2
  • 1
    Please include code that you have already tried to implement in your question.
    – Joe
    Commented Apr 13, 2017 at 14:46
  • Thanks Joe. I'm new to stackoverflow/coding, so your tip is appreciated. Commented Apr 19, 2017 at 15:19

2 Answers 2

5

In future, adding your current attempt is a great idea as it will help us adjust your code. You've clearly tried some things, they clearly didn't work (else you wouldn't have come here) - show us what you tried, and we might be able to help you fix your current attempt!

Anyways, on to the actual code.

Seeing as you are missing a bit of information, I am going to have to make a few assumptions.

I am going to assuming that you have a button that looks like this:

<a href="#my-visual-composer-row-id" class="my-link">Click here to scroll down</a>

and I am going to assume that you have given your visual composer row an ID of my-visual-composer-row-id (you can do this under the edit options on the actual row itself)

If you're ok with using jQuery, you can then implement the following either in a RAW JavaScript block somewhere (preferably the bottom of the page), or if you're making your own theme, you can add this to your .js file.

jQuery(document).ready(function($){
    $('.my-link, .my-link a').click(function(e){
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                jQuery('html, body').animate({
                    scrollTop: Math.ceil(target.offset().top) 
                }, 1000);
            return false;
            }
        }
    });
});

this has been adapted from the CSS-Tricks smooth scrolling solution which can be found here.

5
  • You did a great job with your assumptions, and I've implemented everything as well as I know how (I am a bit of a rookie). But still no luck. Here's the url www.evermanapparel.co.za. I've also added screenshots to the questions on how I've tried to implement your suggestion. Commented Apr 19, 2017 at 15:12
  • 1
    @JohnBlignaut so the problem you were experiencing was with the class name my-link - I assumed you would give the a tag a class my-link but visual composer added your custom class to the wrapping div instead, which rendered the $('a.my-link')... moot. However, adjusting that to $('.my-link a').... fixes that on your site :) I've edited the code block on my answer, so remove your old block, and re-add the new code in the code block :)
    – Frits
    Commented Apr 19, 2017 at 16:52
  • Thanks again. Tried that, but still no joy... Any other ideas? Commented Apr 20, 2017 at 10:40
  • Hi @JohnBlignaut - I actually tried it on your website and it worked for me (added the javascript through the developer tools). You seem to have accidentally removed a > in your RAW javascript block - the first line reads <script jQuery(document).ready(function($){ - notice that the script tag isn't closed. It needs to be <script> jQuery(document).ready(function($){ does that make sense?
    – Frits
    Commented Apr 20, 2017 at 10:45
  • It works! What a pleasure to watch it scroll so smoothly. Thanks for the solution, and thanks for your patience with a rookie ;-) Commented Apr 21, 2017 at 8:18
0

I realise this is quite an old post but this just worked for me...

To achieve this in Visual Composer frontend editor, add your anchor id to the Anchor field for the row you want to jump to. In the Row Setting dialogue, under the Anchor text field you can see a hint that says: 'If anchor is "contact", use "#!/contact" as its smooth scroll link.'

e.g http://domainname.com/page-name/#!/contact

Screengrab from WP VC Row Settings dialogue showing Anchor entry field.

Hope that helps, Ben

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.