This website uses cookies to personalise ads and to analyse traffic ok
web design

Using Page scroll to id with WPBakery Page Builder

A quick guide for using “Page scroll to id” WordPress plugin with WPBakery Page Builder on your WordPress site.

In WordPress admin, go to SettingsPage scroll to id. Change the Selector(s) option value to:

a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion])

and hit Save Changes.

By changing the element selector above, we instruct the plugin to handle all links that have a hash (#) in their URL but exclude the page builder tabs and accordions.

WPBakery Page Builder allows us to enter an id value for each row/column/widget/element we want (via the Row ID and Element ID fields). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise.

In the post/page builder, edit the row/column/element you want (via the pencil icon) to add a target id

Enter the id value you want (e.g. section-1) in the Row ID or Element ID fields (in the “General” tab)

Click Save changes to save and close it.

When ready, click Update (or Publish) to save your post.

Now, any link you create with URL #section-1 (or any id value you entered in the Row ID or Element ID field previously) will scroll smoothly to that target. You can create standard/plain links in the post editor, custom links in your menu, links via “Page scroll to id” shortcode etc. All kind of links will work as long as they point to an existing target id in your page(s).

In addition to all the method above, you can always use plugin’s shortcodes directly in builder’s text block.

 


24 Comments

Post a comment
  1. Njengah
    Posted on September 25, 2019 at 02:09 Permalink

    Works very well and easy to use. Thank you.

    Reply
  2. Maged Mohamed
    Posted on August 23, 2019 at 20:17 Permalink

    Hi,

    I used this but still doesn’t have that smooth transition

    https://www.tktshub.com/events/christmas-event-in-the-city/#tickets

    Thank you

    Reply
  3. Jon
    Posted on August 19, 2019 at 19:02 Permalink

    Hello! Thanks for a great plugin. However, I can’t get it to work. I´m using Wpbakery and found the tutorial who I was going to set up the links. Did everything like the instructions but when I click on a link (#) the page jumps down to the section. It doesn’t float smoothly as it should. I have tried everything but I can’t understand what the problem is?

    Can you please help me?

    Reply
  4. Anna
    Posted on August 13, 2019 at 11:50 Permalink

    Thank you soooo much for this post! <3
    You have no idea how many video of people coding I watched (I am just a simple marketing manager who is tasked with the website as well)
    I can`t write code and this was very helpfull!

    Have an amazing day!

    Reply
  5. Malcolm Lewis
    Posted on July 6, 2019 at 20:30 Permalink

    Hi

    Having trouble getting my links to work. On this page: https://environ-test-domain.virtualdesigncloud.com/environ-acoustic-technologies/ I’ve linked the two top buttons (‘Domestic’ and ‘Commercial’) to the relevant boxes of text below. However, on clicking them they just shoot to the bottom of the page rather than to the relevant text blocks. I’ve changed the ‘Selector’ box in Settings as you advised above, so I can’t see what I’m doing wrong!

    Regards,
    Malcolm

    Reply
    • malihu
      Posted on July 10, 2019 at 10:00 Permalink

      Hey, I’ve just replied to you via email (you have an error in your “Selector(s)” option value).

      Reply
  6. James
    Posted on June 14, 2019 at 04:24 Permalink

    Hi there, thanks so much for creating this plug in – it’s awesome!

    Been using this plug in with no issues up until this evening – I spent today updating wordpress and plug ins that I’d been ignoring. I was checking the website after every update and there weren’t any issues.

    I then updated WPBakery Page Builder (the very last plug in on the list) and that update deleted all my element IDs. I put these element IDs back in and the menu scrolls to the correct elements, but now it immediately scrolls back to the top of the page.

    I see this was happening for someone else on mobile, but this is happening to me on desktops. I’ve tried doing as you said above to fix the issue but it’s still happening..

    Any ideas?

    James

    Reply
    • James
      Posted on June 14, 2019 at 04:26 Permalink

      To add to this weird issue – if I manually type in an element URL (for example https://www.cocoandthebutterfields.com/#photos) the page loads, smoothly scrolls to that element and stays put. If I then click on another link in the menu the old issue re-occurs and it scrolls back to the top of the page..

      Reply
    • malihu
      Posted on June 15, 2019 at 02:45 Permalink

      Hello,

      The issue you’re having comes from these scripts in your theme:

      ...themes/croma/js/main.js ...themes/croma/js/barba.min.js

      You can try the following and see if it fixes the issue:

      Go to plugin settings and disable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test your page.

      If it doesn’t work, enable “Prevent other scripts from handling plugin’s links” option. Save changes and test again.

      If non of the above work, it means that “Page scroll to id” cannot fix the issue automatically. You’ll need to see if there’s an option in your theme to disable page smooth scrolling for in-page links. If there is such option, disable it.

      Otherwise, you’d need to manually edit your theme’s js files to prevent the theme scripts from hijacking the links (which may be simple or complicated according on how they do it).

      Also, what happens if you temporarily deactivate “Page scroll to id”? Do the links work?

      Reply
      • James
        Posted on June 15, 2019 at 18:08 Permalink

        Thankyou for such a quick response! I’ll give this a go and report back 🙂

        Reply
      • James
        Posted on June 18, 2019 at 01:48 Permalink

        Hi there!

        Tried the above with no luck – it’s weird because up until that night i’d had no issues with the plugin at all, and I didn’t update the theme..

        I’ll try and contact the theme developers..

        James

        Reply
  7. Manuel
    Posted on May 10, 2019 at 21:25 Permalink

    Hello, everything is working fine on desktop but when I’m on mobile the scroll doesn’t work at all. Can you please help me

    Thank you in advance

    Reply
    • malihu
      Posted on May 11, 2019 at 00:29 Permalink

      Hi,

      Firstly, you need to change your link on your mobile menu from:

      http://rgvhousecalls.com/#ContactUs:fixed

      to:

      http://rgvhousecalls.com/#ContactUs

      Second, you’ll need to add the following to your CSS because your mobile menu script disables scrolling when opened (that’s why the page won’t scroll on mobile):

      .uk-offcanvas-overlay .uk-offcanvas-content { height: auto !important; }

      Hope this helps

      Reply
      • manuel
        Posted on May 11, 2019 at 20:28 Permalink

        thanks it worked on mobile now, I mean when the mobile menu cover the screen it scrolls but as soon as I close the mobile menu it goes back to top. Any solution for this?

        Reply
        • malihu
          Posted on May 11, 2019 at 20:58 Permalink

          This is done by the menu script. The only way I see this working is changing the link URL from:

          http://rgvhousecalls.com/#ContactUs

          to:

          #ContactUs

          so the menu script recognizes that this is an in-page link.

          Another way that might work is to go to “Page scroll to id” settings and enabling “Append the clicked link’s hash value to browser’s URL/address bar” option.

          If none of the above work, you’ll have to contact the menu/theme developer.

          Reply
          • Manuel
            Posted on May 11, 2019 at 21:03 Permalink

            It works!! thanks a lot!!! awesome job!!

      • Manuel
        Posted on May 11, 2019 at 21:00 Permalink

        Thank you it is working but half way. When im on mobile and the menu is covering 2/3 of the screen I can see that it is scrolling but as soon as I close the mobile menu it goes back to top of the page. Any ideas?

        Reply
  8. Jonathan
    Posted on May 10, 2019 at 11:09 Permalink

    Hello, everything works fine with the add-on but at the time of the arrow that is the beginning of the page it does not work (it just does not do anything). I would like to know what I have to do to make it work or work.

    Thank you very much in advance.

    ————-

    Hola, todo funciona bien con el complemento pero a la hora de que la flecha que te manda al principio de la página no sirve (simplemente no hace nada). Quisiera saber qué tengo que hacer para que funcione esa función, sin que afecta al menú que funciona a la perfección.

    Muchísimas gracias de antemano.

    Reply
    • malihu
      Posted on May 10, 2019 at 18:08 Permalink

      I have to see your page in order to help. Is the arrow an actual link? Can you post your URL?

      Reply
  9. Eugene
    Posted on January 5, 2019 at 17:20 Permalink

    thanks foor instruction, Ive been able to add it to my Visual Composer page but it doesnt glide smothly like it used to be. How do I make it glide to #Section smoothly.

    Reply
    • malihu
      Posted on January 7, 2019 at 00:09 Permalink

      Can you post your page link so I can check it? Tried the URL in your name but it’s under maintenance.

      Reply
  10. Maria
    Posted on December 5, 2018 at 01:22 Permalink

    I have set an scroll-to-id here: http://joy-academy.eu/programs/#formies-program

    Everytime I load it, it leads to me to another place. Also it doesn’t bring me to the place that I have selected.

    Reply
  11. max
    Posted on November 28, 2018 at 16:48 Permalink

    Dear Developer,

    I am trying to integrate hte page scroll to id tool into my wordpress site using the theme ”Partner”. As I use the WP Bakery builder for this theme I fllowed your explenation carefully. But, for some reason the Scroll is not smooth when I use the links in my Navigation Bar. For normal links everything works out perfetly. Any support or hints are highly appreciated. Thank you very much in advance.

    Best regards

    Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php