Scroll down button

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

Comments

  • 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.
    Thanks
  • 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,
  • 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
  • Hello,
    Yes it would be very helpful if you can show me how to do it.


    best wishes,
    Tom
  • 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:
    Thanks
  • Hello Pablo,

    I provided the class into the section with this button, but nothing happend.
    Did i make a mistake?
  • 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
  • Ok it works, but how can i add a smooth scroll behavior, like it was before with the button?

    Thanks
  • It does not work because you have added id="scroll" and you should add class="scroll"
    thanks
  • 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.

  • 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

  • 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!

  • edited 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

Sign In or Register to comment.