UX: page should scroll smoothly

[sammuell]

Description

The element indicator uses an animation (css transistion) to move to the next element. However, if the element is outside of the viewport the page scrolls instantly to the element. It is confusing because the animated element leaves the viewport which then jumps to another location.

Expected Behavior

It would be nice if both would be smoothly animated or none

Actual Behavior

The page scroll is instant.

Potential solution

Use scroll-behavior on html tag (and scrollable container elements) using a separate css class which is applied temporarily. Use the same class to apply the transition to the helper element. Add an option to apply this class, making both animations optional.

[Zvonimir1995]

Recently, i needed to implement a smooth scroll in my introJS tutorial, and, as a workaround, you can use introJS onbeforechange function. It looks something like this:

introJs().onbeforechange(async (htmlEl) => {
	await scrollToElement(htmlEl, mdDown);
        return true;
}).setOptions({...}).start()

Then, on your element you can data-custom-scroll-to property and set it to something meaningful to you. For instance, I use "top" or "element", for "top", i scroll to top: 0, and for "element", I scroll to top: htmlEl.offsetTop - 300 .

My function looks like this:

 export const scrollToElement: (htmlEl: HTMLElement, mdDown: boolean) => Promise<true> = (
 	htmlEl,
 	mdDown
 ) => {
 	return new Promise((resolve) => {
 		const customScrollAttribute = htmlEl.getAttribute(
 			'data-custom-scroll-to'
 		) as CustomScrollTo | null;
 		if (customScrollAttribute === 'top') {
 			window.scrollTo({
 				top: 0,
 				left: 0,
 				behavior: 'smooth'
 			});
 			delay(250).then(() => {
 				resolve(true);
 			});
 		} else if (customScrollAttribute === 'element') {
 			window.scrollTo({
 				top: htmlEl.offsetTop - (mdDown ? 250 : 300),
 				left: 0,
 				behavior: 'smooth'
 			});
 			delay(250).then(() => {
 				resolve(true);
 			});
 		} else {
 			resolve(true);
 		}
 	});
 };

In this case, my htmlEl look like:
<section data-custom-scroll-to={'element' as CustomScrollTo} className="...">

Other solution, you can add smooth scrolling globally if you want. But I did not want to do that.
For my solution, I also needed mdDown variable that specifies the device width so i can position my element better so the tooltip has enough space on the top of the highlighted element.