How to link on the same page via anchor

Beaver Builder
1

Hello

I would like to place a link on the page, that it automatically scrolls (smooth) down on the same page to the next row, how can i achieve this?

like: www.mypage.com/#about

thanks
Phil

2

Hi Phil,

Thanks for asking! That’s not currently possible to do with the builder but it is on our list of modules to implement this summer.

For now, you can add an HTML module with the anchor tag you want to scroll to like this…

<a name="about"></a>

With that in place, your link will jump to that spot on the page when clicked. You can add a little bit of jQuery to your theme to make the link scroll smoothly instead of jump. This snippet should get the job done for you.

Let me know if you have any questions!

3

Hi Justin

Where would I need to add this snipped? this is my page (beta) http://cryo.pageservant.ch
I just need it to scroll down to the first “option” when the click on the arrow pointing down.

regards
Phil

4

That page is looking great!

The snippet should go in a JavaScript file for your theme. If you’re not sure how to do that, you can drop in an HTML module at the bottom of the page and add the snippet in between script tags like this…

<script> JS code here </script>

5

Hi Justin

After the update to Wordpress 3.9.1 and Automator theme 1.0.6 the smooth scroll doesn’t work anymore. Before it worked with the snipped you provided above.

regards
Phil

6

if I try to add the html module again and press save… it doesn’t save. the loading line goes forever back and forth.

7

Hi Philipp,

Sorry to hear about these issues. Did you recently install any new plugins? If so, can you try deactivating those first to see if the problem goes away? If it does, let me know what the plugin is that’s causing the issue and I’ll look into a fix.

If that doesn’t work, can you provide me with your server’s error log or temporary admin access to your site?

Thanks,
Justin

8

[Content Hidden]

9

Hi Phil,

It looks like the smooth scrolling code was missing. I added it back to the HTML module and everything is working fine now. Let me know if you run into any other issues.

Justin

10

[Content Hidden]

11

Hi Phil,

You’re welcome! I think there might have been an error in the scrolling JavaScript code that was conflicting with the updated builder and theme. I tweaked it for you so it should work from here on out. You should be able to use as many HTML modules with scripts as you would like.

Justin

12

Hi Justin,

Did the module you were talking about earlier ever get implemented? Wanted to do something similar, and was wondering if there was an easier way now.

Thanks.

13

Hi Helms,

Thanks for asking. It’s still on the list, but hasn’t been implemented yet. We ended up spending much of last year focusing on the core builder instead of creating new modules. There also hasn’t been much demand for it that we can see, so it hasn’t been a priority at this point. Feel free to add it as a suggestion to our feedback forum!

Thanks,
Justin

14

Thanks Justin. I’ll do that.
How were you planning on adding this functionality, by adding and ‘Add ID’ field to the modules, the same way there is a ‘Class’ field?

15

Hi Helms,

We’re not entirely sure at this point. We try to make everything as easy as possible, so having to add an ID might not be an elegant solution. Off the top of my head, the module might be be a “Scroll To” module that would either allow you to scroll to a section with a down arrow, or back to the top of the page with an up arrow.

Justin

16

FYI for anyone coming across this old thread this is now built in to beaver: http://forum.wpbeaverbuilder.com/knowledge-base/smooth-scrolling-buttons-icons-and-links/

17

Thank you!