Scroll down button

tomtom3000 · December 2018

Hello Muffingroup,

I want to know if there is an easier way to add a scroll down button to my pages than shown on the following page (Link below).

I want to have a button, that if i click on it, it should take me to a specific section.

On the following page you will see some examples: https://codepen.io/nxworld/pen/OyRrGy

Best wishes,

Thomas

Pablo · December 2018

Hi,

Edit the section to which you want the button to scroll
- http://prnt.sc/f2vcho

In the field Custom ID type in the id from the button, in my case, it
was id=work, no hashtag there - http://prnt.sc/f2vgaz

Remember to have the one-page option selected under the muffinbuiler - http://prnt.sc/f2vcm7

Then create the button or a link which you activate to scroll(add link to this button, href to link with '#work' - in my case), you need to add a 'scroll' class to the custom link element.

http://prntscr.com/lqxe29

http://prntscr.com/lqxeal

Thanks

tomtom3000 · December 2018

Thank you very much Pablo.

I have one more question:

How can i remove the border and the background color?

I want to have just the icon as the button without any specials.

Do i have to remove everything by adding some CSS code?

Thank you and best wishes,

Pablo · December 2018

Unfortunately, it's possible only with Custom CSS.

If you don't know how to do it, please send me a link to your website.

Thanks

tomtom3000 · December 2018

Hello,

That`s my website -> http://pure-vacation.com/about-us/

Yes it would be very helpful if you can show me how to do it.

best wishes,

Tom

Pablo · December 2018

Can you provide the class into the section with this button?

Edit this page and edit section, then scroll to the bottom and type class like on this picture below:

http://prntscr.com/lrj2p6

Thanks

tomtom3000 · December 2018

Hello Pablo,

I provided the class into the section with this button, but nothing happend.

Did i make a mistake?

Pablo · December 2018

I'm not able to change it by CSS, sorry about that.
This button has inline CSS which is not possible to overwrite
http://prntscr.com/lrw6cz

You can change this button to column with text(or image) with <a> parameter.
Just add to href="#wheretoscroll" and class "scroll".
Thanks

tomtom3000 · December 2018

Ok it works, but how can i add a smooth scroll behavior, like it was before with the button?

Thanks

Bryan · December 2018

It does not work because you have added id="scroll" and you should add class="scroll"

thanks

gnorimaki · May 2022

Hello,

In BeBuilder this does not work.

The class places it in the DIV not in the BUTTON so the "scroll" effect doesn't do it.

On the other hand, my page is of type "one page" so when browsing the menu the url does not change (adding "#SECTIONID" to the url). And doing it with the class, since it doesn't do it for JS, it adds the ID in the url and it would be nice if it didn't do it, it dirty the url.

So:

1) how to use scroll class in a button with BeBuilder?

2) how do you not update the url of the page when you have a button that takes you to an ID with the page type "one page"? Can you provide some JS code or indicate what function to use to be able to place in the custom JS or execute the function or function similar to the one used by the menu on "one page"?

Thanks.

Phil · May 2022

Hi @gnorimaki,

1) We will add the option to activate the scroll class button. It was moved to deprecated features, and we forgot to include it in a new version.

You can place your button with a shortcode in the Column Text element as a temporary workaround.

The scroll class works correctly with it.

2) The file that controls it is script.js the function is named onePageMenu.

Thanks

gnorimaki · May 2022

Brilliant. Thanks for the reply.

Out of curiosity: when you implement this option, will the URL change on one page or will only the domain name remain?

Thanks!

Phil · May 2022

Only the domain name remains when this function works if you are on the Home page. However, if you are on a subpage, then the title of this subpage will be included in the URL too.

Best regards

Scroll down button

Comments