Buttonizer Smooth Scrolling Issue

MMagedMoh94 · Sep 26, 2019

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 · Sep 26, 2019

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!

MMagedMoh94 · Sep 26, 2019

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 ?

MMagedMoh94 · Sep 27, 2019

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