Buttonizer Smooth Scrolling Issue

MagedMoh94

Hi,

I'm going to buy the pro version but i'm testing out the free version first i tried to make a button that scrolls to a specific section in the page, i use wpbakery so i set the row id and added in the buttonizer the url as #schedule its working and it scrolls down to the right section but it jumps not a smooth scroll ..

Test the button here in the Issue: https://www.staging1.tktshub.com/events/christmas-event-in-the-city

Bare in mind that i already have links in a specific menu that anchors to a specific section and scrolls smoothly easily without any issue.
You can test the menu here items in the link below
Working scroll animation Test: https://www.staging1.tktshub.com/landing-page-3/#schedule

Why is that and how can i solve it ?

James

Hi MagedMoh94 ,

Welcome to the Buttonizer forums! 🥳

Perhaps you can solve this by adding this CSS to your site:

html {
  scroll-behavior: smooth;
}

Here's a test of adding this:

Let me know if this works for you! 😀

MagedMoh94

Hi,

Thank you so much, but do you mean that i have to add this code below in the appearance>customizer ?

html {
scroll-behavior: smooth;
}

If yes, i have already did that and testing it from safari on iPhone now as i don't have laptop for now but still now working can you test it ur self after adding the css now if its working ?

MagedMoh94

MagedMoh94 Its working on chrome & safari but still not working on safari mac os or safari ios, why ? i found that this css behavior is not supported in safari but still the demo i provided here https://www.staging1.tktshub.com/landing-page-3/#schedule works on safari ios and mac

how can i achieve it to work on safari too ?

Even There is an issue on the working browsers on windows and on android that when i click on the floating icon to scroll me down to the section you need to click on it the first time when you refresh the page 2 times to work at the first visit and if you refreshed you will need 2 clicks the first time too. ( THIS IS ON CHROME ONLY IT WORKS FINE ON FIREFOX)

And thank you for your help

Jasper

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? 🙂

MagedMoh94

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

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!

MagedMoh94

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

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.

MagedMoh94

James

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

Thank you.

James

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.

MagedMoh94

Worked like a charm 😀

Thank you so much james

Partybond

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

Jasper

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