How to make mobile slides start automatic on top, scroll to does not work

Ask the community
,
1

Hello I hope somebody can help me with my mobile slide show
My slides are not all the same lenght and clicking trough it the slides do not open on top, but on the same level as the button in the previous slide.
1 Slide is very lenghty and when opening the next slide I want it to open on top, so people see the next message instead of an empty space
I have made a Slide show using Wix code, to navigate from 1 slide to the other (button onClick)
I tried scroll to but it does not work for my mobile slide show
(I never did coding before, just try to make a great wix website :slight_smile:

Thank you
Patricia

2

Hey there,

It may be where you’re inputting the scrollTo() in your code, have you tried inputting the function in different parts of your code to test it out on its own?

You may also want to check if the correct module has been imported .
Take a look at the wix-window API.

Also, if you’re only trying to implement this functionality for mobile devices you may want to use the formFactor property of the wix-window API, which returns either “Desktop”, “Mobile”, or “Tablet” and then add your code that includes the condition to control how your elements behave, based on the device.

Check out this article for reference:
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

If you’re still experiencing issues with your functionality, please provide a link to your site and your code snippet here, and we’ll gladly take another look.

Best regards,
Miguel

3

Hi Miquel,

Thank you for your reply, I really hope you can help me
Actually I want the slide show to start with all the slides on top (laptop-tablet and mobile), as most of our visitors come by mobile I thought to first make sure this works.

As you mentioned I tried to at the code in different parts, but the slides are all opened at the continuation of the level of the previous slide

This is the link to the not published slide a
https://www.bedouinstar .org/copy-of-book-your-room-englsih
com/corvid

1920×1080 271 KB

Slide 3 people choose room by scrolling down

1920×1080 281 KB

Slide 4 opens the same level as slide 3 the choosen room

1920×1080 250 KB

Instead I want slide 4 to open on top of the slide to continue the reservation

1920×1080 267 KB

Thank you,
KInd regards
Patricia

4

I’m in the exact same position! Was there a solution to make this work? I would really would like every slide to start at the top of the page (vs the location on the previous slide). I tried everything (scrollto(), wixwindow, and nothing is working to make it go to the top of the page when one swipes to the next slide. Is there a solution? If there’s an answer, I would greatly appreciate what the code is to make it work.
Thanks,
Nadia

5

Hi Nadia
I ended up adding the below code in the slideshow site (not page). It worked 2 times and now it does not work anymore
Maybe you are more lucky,

import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
wixWindow.scrollTo( 10 , 5 );

});

Lets keep eachother updated

Patricia

6

Hi Patricia, thank you! I tried that too and it didn’t work for me either.

After doing more research this weekend, I figured out a way to take the viewer to the top of the slideshow by scrolling to an invisible element. Unfortunately, it’s not the complete solution which we’re looking for, as it doesn’t react on loading, but it can be used as a placeholder until we get answers.

This really works on places where you have a blank space where you don’t want the viewer to go to. When anyone goes to that element in the blank space, the page will scroll to the top.

(Works same on mobile and desktop):

  1. Place an anchor at the top of your slideshow/page, or where on the page you’d like to scroll to.

You prob know this but just in case, anchors can be found under Add…Menu…Anchors

  1. Then place an element on the slide/page which has the blank space (I placed a triangle shape - can be anything)

  2. Then move that element near the bottom of that slide/page in the blank space , or about where the viewer might scroll to from the prior slide.

  3. Make that element the same color as your background so it’s invisible

  4. Select the element, and in Properties (Tools…Properties Panel), hit the plus sign on ViewPortEnter as shown below:

430×640 26.2 KB

  1. Then click in the code window, and the following should automatically appear (the name of my element is called “vectorImage114”):

export function vectorImage114_viewportEnter(event) {
//Add your code for this event here:
}

  1. Then add the following code (“anchor1” is the name of my anchor) so the whole code looks like this:

export function vectorImage114_viewportEnter(event) {
setTimeout( function (parameter) {
$w( “#anchor1” ).scrollTo()
}, 1000 )
}

I’ve set a timeout of 1 second so it doesn’t react so quickly. I found it a bit jarring when it quickly scrolls to the top without the 1 second or so. So when anyone goes to that element, the page will scroll to the top. If you have questions, let me know.

I would still really like to know if there’s a loading function vs an element scroll to function. There must be a way. If you find out anything, please keep me updated. I’ll do the same.

Best,
Nadia