$w("#element").scrollTo() without animation

Ask the community
,
1

Hey,
is it possible to disable the animation with:

$w("#element").scrollTo();

In the documentation is only a function for wixWindow

wixWindow.scrollTo(100,500, {"scrollAnimation":false});

but there’s no functition in the documentation so disable the scrollAnimation when scrolling to an element

Is it possible to disable the animation?

2

Hello, from the docs you linked to disable the animation you will need to use wixWindow and set the coordinates for the element

" Tip : Use the wix-window scrollTo() function to scroll directly to an element, and also disable the animation. To get the coordinates for scrolling, display the Wix Editor Toolbar. In the Editor, move the cursor to the top-left pixel where you want the page to scroll to. The X and Y axis Position values show the coordinates."

3

sry posted this question on the wrong forum, I’m on Editor X, so Idon’t have an exact position of the element. Is there a way to do this on Editor X?

4

Ah, I see. I am not as familiar with EditorX to say if there is an easier out of the box method. I would suggest also posting your question in the EditorX forum if you haven’t yet to see if anyone there has another suggestion

5

@nickoertel From the link you posted earlier:

“To get the coordinates for scrolling, display the Wix Editor Toolbar. In the Editor, move the cursor to the top-left pixel where you want the page to scroll to. The X and Y axis Position values show the coordinates.”

Hope this helps

6

If your website is connected to YOUR OWN domain. you can use a custom element as workaround.

  1. Add custom element to your page (it’s under the embedded section)

  2. Put it exactly under the element you wish to scroll to.

  3. Under public/custom-elements directory, create a js file, scrollto.js
    Put something like that inside:

//public/custom-elements/scrollto.js
class ScrollTo extends HTMLElement {
    connectedCallback() {
        this.style.height = '1px';
        this.style.width = '100%';
        this.style.visibility = 'hidden';
    }
    static get observedAttributes() { return ['scroll-time']; }
    attributeChangedCallback(name) {
        if (name === 'scroll-time') {
            this.scrollIntoView();
        }
    }
}
customElements.define('scroll-to', ScrollTo);

On the page:
Click the custom element >Choose Source > Velo File > scrollto.js
Tag Name: scroll-to

On your page code, once you wish to scroll:

$w('#customElementScroller').setAttribute('scroll-time', Date.now().toString());
7

Sry for my late reply, but I had some other projects I had to take care of…

I want to use this scroll function for a repeater, so I can’t put the custom elm under the repeater, because if I do, the site scrolls to the last entry of the repeater.

Is there a way to put the element over the repeater? The code is only working, if the elm is under the repeater.

8

@nickoertel Hi, if you wish to scroll it to a specific item in the repeater, you can’t do it with the custom element (you will either have to do it with animation or create an html repeater inside the custom element).
However , if you only want to scroll it to the top of the repeater, then you can put it at the repeater top.
To make it easier, put both the repeater and the custom element inside a box (at the top of the box).

9

@jonatandor35 Thanks, I already tried yesterday to put the element on top of the repeater, but it didn’t work… but for some reason it’s working today.
Thanks for your help :grinning::beers: