Scroll to top problem Ajaxify Bootstrap 5

[Allmedialab]

https://www.yourweblab.nl/scroll-top/index.html

Hi,

Scroll to top is having a strange behavior when Ajaxify is implemented in a Bootstrap 5 website. To replicate the issue go to the Home page and scroll all the way to the bottom of the page, then click on Wij to see that the page is only halfway the scroll distance.

The Home page is larger then the Wij page, when you click from the smaller Wij page to Home is works as normal. The worst artifacts are showing up in the Mozilla Firefox browser, but in all other browsers you notice a hiccup at the point where Firefox stops with scrolling.

I made a other test site with no Bootstrap in it and there it works perfect. The problem was there in earlier versions too I have checked that.

Regards,

David

[arvgta]

Hi David,

Thanks for pointing this out!

I was able to reproduce the behaviour exactly as you described. On Chrome and other browsers, there is a "hickup" at the point where Firefox stops completely.

I also controlled your Ajaxify call and you are correctly specifying:

• scrolltop: true

Also had a look at the (new) source code of scrolly - the strange thing is that the following is the only code that is executed in your case:

• window.scrollTo(0, 0) //Both x and y dimensions are 0

...effectively.

Finally, I had a look whether there is an issue with scrollTo on Firefox - there doesn't seem to be.

Are you sure, that Bootstrap doesn't do its own scroll handling somehow, which may interfere with Ajaxify's?

[Allmedialab]

Hi Arvind,

https://www.yourweblab.nl/scroll-top/index.html

Yes there is all kinds of scroll activity in Bootstrap js but when I remove all Bootstrap js the problem is still there.

When you click the demo test link you can see the same setup with Bootsrap 5 without any Bootstrap 5 js.

All is left is the CSS.

Regards,

David

[Allmedialab]

https://www.yourweblab.nl/scroll-top-2/index.html

Hi Arvind,

Here a example with no BS5 CSS or JavaScript and then it works as expected. The problem is in the Bootstrap CSS.

Regards,

David

[arvgta]

Hi David,

Just wondering what happens when the full Bootstrap works are enabled and you specify:

• scrolltop: false

?

Regards,
Arvind

[Allmedialab]

Then it doesn't work. I also tried shut off scroll top and added my own JavaScript scroll top code even in the top of the page, but something stops it from working in the CSS from Bootstrap.

[arvgta]

The real problem is, from an Ajaxify point of view, that we're out of settings to try out. I'm sure you don't want:

scrolltop: "s" //default -> so called "smart scroll"

...which would complicate things further

Of course, if we get to the bottom of this issue, it would in theory be possible to provide some different logic with another switch to pass in scrolltop

[Allmedialab]

Of course I tried all setting and even my own code to scroll up at the next page but none was working. Placed a issue on the Bootstrap Github page: twbs/bootstrap#33504 see if that will bring something.

[arvgta]

• Solved