Can I make .scrollBy scroll smoothly?

Ask the community
,
1

I have a working solution where a link to a dynamic page successfully targets an item in a repeater on the target page (using wix location query) and scrolls down to it smoothly, (I had to put in a slight setTimeout delay to stop it scrolling back to the top of the page after!) but all the above I’m really happy with.

The problem is that the scrollTo takes the item too close to the top of the page. I’ve searched a lot around and see other people have this niggle too. I thought i’d simply use a .then and run a .scrollBy after to slip it back up the page a bit, but the animation looks terrible as the first portion (covered by the above events) is smooth, and the last ‘fix’ scrollBy snaps.

Can the .scrollBy be made to smoothly scroll rather than snap?

This is how it’s setup at the moment

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

let targetItem =  wixLocation.query.item;
function scrollToRepeaterItem(itemId){
 if(itemId !== undefined){
    $w("#repeater1").forItems( [itemId], ($item, itemData, index) => {
$item("#container1").scrollTo()
    .then( () => { wixWindow.scrollBy(0,-100) } );
    })
    }
}

$w.onReady(function () {
    setTimeout(function (parameter) {
    $w("#dataset1").onReady( () => {
scrollToRepeaterItem(targetItem);
});
    }, 1600)
});

Thank you in advance for any help! :slight_smile:

2

Hi,

As a workaround, I’d recommend adding some invisible box 100 pixels above the container and simply scroll to it.

If this doesn’t help, and the scroll to/by animation works incorrectly, please contact Wix Customer Care here , so they can check the issue.

3

Cheers, will do.
Only issue with your workaround is that if you were to navigate to the whole page normally (not via the anchor solution) there would have to be blank 200px spaces between each item in the repeater, which wouldn’t look great.

But thanks anyway