Loading a new page in the same position

Ask the community
,
1

Please excuse my ignorance, I’m new to Corvid!

I have two pages with the exact same layout, but different text/imagery. I’m trying to link a button on Page A to take the user to Page B, but scrolled to the exact same position they were at on Page A.

From my googlings and hunting around in the extensive Wix API docs, I think I need to tell Wix to save the current location on Page A, and then recall that location when Page B loads, and scroll there (although I would prefer it to just load at that location and not physically scroll).

I tried an alternate method of just jumping to an element kinda in the right place, but it’s janky and quite jarring when making the transition:

import wixLocation from 'wix-location';
export function immersivebutton_click(event) {
    wixLocation.to('/immersive#text14');
}

Any help on how I would go about doing this would be greatly, greatly appreciated!

Many thanks,
Gordon

2

Hello Gordon,
I Think It requires a bit of coding -
Here it is

Code For Where the button is -


$w.onReady(function () {
 //TODO: write your page related code here...

});
import {session} from 'wix-storage';
session.setItem("pagescroll", "0");    // you can change the 
                                  "pagescroll" into any word 
                               you like but set the "0" as it.


import wixLocation from 'wix-location';
export function button1_click(event) {   // add the onclick 
                                     event of the button you 
                                         want .
 session.setItem("pagescroll", "1");    // "pagescroll" is 
                                     the item. (Look above)
wixLocation.to(`/blank`)    //set the page you want to link.
                            // Put the page under this sign 
                            `home`         
}

Code For the page where the text is situated-

$w.onReady(function () {
 //TODO: write your page related code here...

});

import {session} from 'wix-storage';
let pageto = session.getItem("pagescroll");  //getting the 
                                 item from the previous page and giving it a variable.  // pageto is the variable given here. You can change the pageto to any other. // DONT put the pageto in apostrophe marks.                                                                                     
 

export function page1_viewportEnter(event) {    // add the 
                                 page viewpointenter function.
 
 if(pageto == 1){
        setTimeout(function() {  // copy this setTimeout 
                                function. It is neccessary.
$w('#anchor1').scrollTo();    // make an achor just above your 
                              text
    }, 1000);   
    }   
}

For Reference
Import session from wixStorage - wix-storage-frontend - Velo API Reference - Wix.com
Wix Location – wix-location-frontend - Velo API Reference - Wix.com
Timeout Function – https://www.wix.com/corvid/forum/community-discussion/adding-a-delay

Ajith

3

Hi Ajith, thanks so much for your reply, this is great! I’ve input the code and whilst it’s not working for me yet, I’ve got a hunch it could be because of the following:

export function page1_viewportEnter(event) {

should ‘page1’ be the name of the page the user has just come from? So if the page is called ‘digital’ it would be ‘digital_viewportEnter’. Or is it the new page the user has just navigated to?

also with the following:

if(pageto == 1){

Wix pops me up a message saying: Expected ‘===’ and instead saw ‘==’

Should this be:

 if(pageto === 1){

Thank you so much for your time on this, I really appreciate the help.

For reference this is current code in the site:

Digital page:

$w.onReady(function () {

});

//Button to go to Immersive page 
import {session} from 'wix-storage';
session.setItem("pagescroll", "0"); 

import wixLocation from 'wix-location';

export function immersivebutton_click(event) {   
 session.setItem("pagescroll", "1"); 
 wixLocation.to("/immersive")
}

//fade animation settings for nav background
let fadeOptions = {
 "duration": 350,
 "delay": 0
};

//Show or hide nav background on scrolling past the header image
export function navshow_viewportEnter(event) {
    $w('#blackstrip').hide("fade", fadeOptions);
}

export function navshow_viewportLeave(event) {
    $w('#blackstrip').show("fade", fadeOptions);
}

Immersive page:

$w.onReady(function () {
 
});

import {session} from 'wix-storage';
let pageto = session.getItem("pagescroll");                                                                                    

export function page1_viewportEnter(event) {
 
 if(pageto === 1){
        setTimeout(function() { 
 
$w('#immersiveanchor').scrollTo();     
    }, 1000);   
    }   
}

//fade animation settings for nav background
 let fadeOptions = {
 "duration": 350,
 "delay": 0
};
    
//Show or hide nav background on scrolling past the header image
export function navshow_viewportEnter(event) {
    $w('#blackstrip').hide("fade", fadeOptions);
}

export function navshow_viewportLeave(event) {
    $w('#blackstrip').show("fade", fadeOptions);
}
4 
export function page1_viewportEnter(event) {

Firstly, you have to delete the above code (first line only) ,go to the page where the text is (that is the page where the user should be navigated). Then, click on the page (not on the strip) go to properties panel and —

1919×916 122 KB

click on the “onViewpointEnter” .

Now on your Code Panel , this will come —

1919×914 136 KB

Just copy that line and paste it on the respective page.

Regarding of your 2nd issue,

if(pageto == 1){

Just make it like this. It will say some issues don’t mind it.

Happy coding,
Ajith