Smooth scroll implementation Ajaxify

[Allmedialab]

Hi,

At the moment when Ajaxify is implemented in a website with the use of: html { scroll-behaviour: smooth; } Like any modern website, but also frameworks like Bootstrap 5 and others, Ajaxify build in scrolltop on next page function is distorted by that CSS rule. This problem is confirmed by one of the creators of Bootstrap5 on their Github page.

My proposal is to change/replace Scrolly and others in a way that smooth-scroll works nicely together with Ajaxify.

Besides the scroll top function I think it would be smart to consider a build in scroll to anchor (smooth one) in Ajaxify too. (that can by done with smooth-scroll!).

Regards,

David

[arvgta]

Hi David,

Thanks for bringing that up!

First of all, I would like to summarise this previous thread, in that a possible workaround is to leave things at the default setting:

• scroll-behavior: auto

...and Ajaxify works fine, like rigidly tested before.

So the purpose of this thread is to arrive at a solution, where Ajaxify works in the case of:

• scroll-behavior: smooth

... as well (which is not the case at the moment, especially on Firefox). (The setting smooth is becoming more and more popular)

---

I would like to summarize which scenarios Ajaxify handles (via JS) at the moment, depending on the setting in its scrolltop parameter:

1. Scroll to the position of an ID, if given it the URL (no matter which setting)
2. Otherwise scroll to the position the user was at, when he last left that page (in case of "smart scroll" - setting "s")
3. Otherwise scroll to top of page (in case of setting "true")
4. Otherwise do nothing at all

---

I think a good first step would be to "measure", which of the above branches lead to problems, when smooth is enabled? (We have already found out, that there is a problem with branch 3) above but what about branches 1) and 2) ?)

David, if possible, could you please "measure" these first in the testbed you kindly provided?

Regards, Arvind

[Allmedialab]

https://www.yourweblab.nl/scroll-top/index.html This is the Bootstrap 5 test site with smooth-scroll enabled on the root.

Regards,

David

[arvgta]

Hi David,

Thanks once more for setting up the testbed!

Here are my test results for the different possible Ajaxfiy scrolltop settings - the simplest first:

1)

• scrolltop: false //no scroll effect at all

...behaves as expected on Firefox and Chrome (nothing happens)

2)

• scrolltop: "s" //smart scroll

...behaves as expected on Firefox and Chrome as long as no scroll to the top is performed. Otherwise there is the erroneous behaviour described below in 3) as well

3)

• scrolltop: true //always scroll to top

There is also the "hickup" you observed in Chrome and the hard erroneous behaviour in Firefox (no scroll at all performed)

---

Sounds complicated, but at a technical level the situation is rather simple - the following code exactly does not work properly in all salient scenarios:

• window.scrollTo(0, 0); //scroll to top

---

I came across this:

• https://stackoverflow.com/questions/1174863/javascript-scrollto-method-does-nothing (Please see the fourth answer)

It might be worth a try for Ajaxify, to always set the following value:

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}

...during initialisation.

Doesn't change a thing unfortunately. (I will keep the code though, because I think it might be needed for other setups)

---

I'm wondering, why everything seem to work fine on the two classic demo sites (on Firefox as well):

• https://4nf.org/

and

• http://www.oeko-fakt.de/

?

---

I also tried setting the following setTimeout():

• let _scrll = o => o ? window.scrollTo(0, o) : setTimeout(window.scrollTo(0, 0))

...following your advice in the background.

Doesn't change anything unfortunately.

---

Could you please check, whether this might be a CSS issue in your setup? (see answer 1)

Thanks and regards, Arvind

[arvgta]

This seems to do the job:

• let _scrll = o => o ? window.scrollTo(0, o) : setTimeout(() => window.scrollTo(0, 0), 2)

Could you please verify that it works for you, too?