MagedMoh94 Hi there, when does the javascript get initialized for those smooth scroll? You may check out the following knowledge base topic: https://community.buttonizer.pro/knowledgebase/37-execute-javascript-after-buttonizer-is-initialized

Then after Buttonizer has initialized you can use the hrefs and button clicks to move to the div.

jQuery(".buttonizer-button").each(function() {
    jQuery(this).click(function() {
	// Button click, search for #blog -> jQuery smooth scroll to the element
    });
});

By the way, I just found out that there isn't a click action on the button at the moment, I was wondering if that's on purpose? 🙂

    Jasper

    Hi,

    Forge the example above and its issues i have purchased the pro version and make a setup here https://www.tktshub.com/events/christmas-event-in-the-city/, using a javascript to anchor to the section, its working fine with smooth on chrome and firefox but it doesn't scroll smoothly on safari or internet explorer.

    Here is the javascript i use, can you merge it with the one you provided above ?

    // this should work now
    document.querySelector('#tickets').scrollIntoView({
      behavior: 'smooth'
    });

      Hi MagedMoh94 ,

      Unfortunately, Safari and IE doesn't support smooth scrolling:
      https://css-tricks.com/almanac/properties/s/scroll-behavior/#article-header-id-4

      You can perhaps use jQuery to solve this issue.
      ( Tested on an iPhone using Safari and it seems to work correctly )

      Copy and paste code this into your button using the javascript function:

      jQuery('body,html').animate({
          scrollTop: jQuery('#tickets').offset().top
      }, 500 );

      Let me know if the code works on Safari!

      Hi James,

      Literally I'm amazed by the support you provided to solve this issue and this solution and i want to thank you personally, i surfed the internet alot and could't find a solution and you did it. Yes it works fine on safari mobile and i will test it in the next hours from desktop and other browsers too.

      I just need to understand a bit piece of this code the number '500' refers to what ?

      Thank you so much one more time 😁

        Hi MagedMoh94 ,

        I very much appreciate your... appreciation! 😁

        The 500 at the end of the script is the speed/timing of the scroll.

        With a value of 500 it will take 500ms/0.5 seconds to scroll to the given id.

        If you, for example, change it to 2000.
        It will now take 2000ms/2 seconds to scroll to #tickets.

          James

          James

          Thank you james for clarifying this point too, is there is a default value or auto option ?

          Thank you.

            MagedMoh94 ,

            That's a good question...

            ... I just tested it and it seems that it does have a default speed when you don't add a value at the end.

            jQuery('body,html').animate({
                scrollTop: jQuery('#tickets').offset().top
            });

            So you only have to change the #tickets to make this script work.

            a year later
            3 months later

            Hi - it is possible to add that smooth scrolling generelly when im clicking on the button (its a jump marker)
            Thx

              Hi Partybond , in that case I would like to reffer to the reply of my collegue a few posts back, using custom JavaScript feature: https://community.buttonizer.pro/d/104-buttonizer-smooth-scrolling-issue/11

              Or you can use the hash feature of the browser, for example, only using #test as URL. Then when clicking Buttonizer it will go to the anchor, but you'll need to add to your website:

              html {
                scroll-behavior: smooth;
              }