Buttonizer Smooth Scrolling Issue

Jasper · Oct 3, 2019

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?

MMagedMoh94 · Oct 3, 2019

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

James · Oct 3, 2019

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!

MMagedMoh94 · Oct 4, 2019

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

James · Oct 4, 2019

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.

MMagedMoh94 · Oct 4, 2019

James

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

Thank you.

James · Oct 4, 2019

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.

MMagedMoh94 · Oct 4, 2019

Worked like a charm

Thank you so much james

PPartybond · Dec 4, 2020

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

Jasper · Dec 7, 2020

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