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;
            }