Is it possible to use scrollTo without scrolling animation?
Thanks,
J.D.
#scrollTo #animation #scrolling
This might not work as it isn’t an animation that you can hide as it is a code function, however see if this is any good for you:
Obviously try changing the above code for the scrollTo:
Thank you, @givemeawhisky ,
I don’t think that can help me (but I’m not really sure I got the suggestion there).
Let me explain what I’m trying to achieve, and maybe you’ll have an idea how to do it right.
So, I have a BACK button on the page and I want the users not only to go to the previous page but to be there in the same scrolling position as they were when they left it. To do so I run getBoundingRect( ) before they leave the first page, and then when they click BACK I use scrollTo with the retrieved windowSizeInfo.scroll.y . It works fine, but I don’t need there the scrolling animation.
Any idea?
Thanks,
J.D.
Hi J.D. did you manage to get a resolution to this? I am attempting to load a new page and have it scroll to the same position as the current page, ideally without a scroll animation.
Does this help?
https://www.wix.com/corvid/reference/wix-window/scrollto
function scrollTo(x: number, y: number,[options: ScrollToOptions]):Promise<void>
scrollAnimation
boolean
Indicates whether to scroll with an animation. Defaults to true.
so:
wixWindow.scrollTo(100, 500, {"scrollAnimation": false});
Hello,
Even though this is a rather old post - I am trying to solve an issue which seems related to what you guys have been discussing here… and since I see a number of ‘Velo Masters’ in the thread [ @jonatandor35 / @givemeawhisky ], I thought I’d try my luck here!
[BTW - I am a total novice at coding - so, please pardon my naivete !]
I have a ‘back to top’ button on my footer - NOT the built-in button that wix provides - but a separate icon - #shape31
When clicked, I want the page to jump to the top WITHOUT the inherent page-animation.
And the following code is doing THIS PART of the job fine!
export function shape31_click(event) {
wixWindow.scrollTo( 0 , 0 , { “scrollAnimation” : false })
}
However, when the page jumps to the top, in response to this button-click - another UNWANTED issue is coming in the way…
Issue:-
My HEADER - which has a “Disappears” setting - is NOT GETTING REVEALED !
I have tried adding other bits of code - as below… but none of that is helping…
export function shape31_click(event) {
wixWindow.scrollTo( 0 , 0 , { “scrollAnimation” : false });
//trial code addition 1
$w( ‘#header1’ ).expand();
//to this, wix says “’ expand ’ [or show()] does not exist on ‘#header1’”
/trial code addition 2
( ‘#columnStrip14’ ).expand()
// #columnStrip14 is the main container within the Header - but this code has no effect on the header being shown either, obviously!
}
Any ideas… anyone?
Thanks in advance!
You cannot expand or collapse header via Velo (only with custom elements or custom code).
However I don’t understand the issue. If you set the page layout to “Standard” the header will always show up no matter what Velo code you have. And if you set it to “No Header & Footer” it won’t show up no matter which Velo code you have there.
Hello @jonatandor35 ,
Thank you for responding!
Clarification1 ~
[Not sure I understand you correctly?!]
When you say, " You cannot expand or collapse header via Velo (only with custom elements or custom code) " ~
Do you mean that it can be done using the CODE PANEL (“custom code”) - but not through the customisations that Velo allows for an element?
If so, then that is what I have been trying to do - write custom code in the code panel - to try and make the header appear, whenever the viewport goes to TOP of the page…
i.e. I am NOT trying to achieve the same using inbuilt customisations - rather, trying to do it with code that I write within the code panel.
Clarification2 ~
It is not about the page layout - which is, incidentally, set to Standard , as you suggest…
I am talking about a FURTHER CUSTOMISATION that is allowed - for ’ Headers ’ - within the Standard page layout option ~ ’ Header Scroll Settings’
Header > Select > Settings icon > Header Scroll Settings > (se to) Disappears
What the above setting does is ~
- Disappears: When you visitors scroll through your site, the header disappears. For the header to reappear, your visitors need to start scrolling up.
This ‘Scroll Effect’ is otherwise working fine.
It’s an ‘ISSUE’ only when I add the above-mentioned code to a Button - as mentioned in my original post…
I have HIGHLIGHTED the issue below as " PROBLEM "
If you look at our Homepage (release candidate) - and scroll down to the FOOTER - you will see TWO icons with upward pointing arrows (both are go to top links)…
—> NOTICE THAT THE HEADER GETS HIDDEN, WHEN YOU SCROOL DOWN - which is the effect of the Disappears setting added to the Header Scroll Effect
- If you click the LOWER icon - black arrow pointing up [I have added this arrow as a ‘test’ button, only for this release candidate] - This arrow-button is LINKED to ‘Top of Page’ with the ‘Link’ option of the Icon.
In this case, the BASICS are FINE - in the sense that …
-
The page jumps to the Top
-
The Header (hidden by the scroll down action) gets revealed -
BUT, there is ANOTHER thing that happens - which is what I am trying to AVOID … -
The page scrolls up WITH ANIMATION - as opposed to, JUMPING to the Top , without the whole page being ‘traversed’ in the course of the movement to the top (‘animation’)
- However, if you click the UPPER icon - white arrow pointing up & text saying ‘TOP’ [this is a icon + text Group] - This Button (Group) - [#shape31] is NOT LINKED to anything with ‘Link’ options…
Instead, it is ‘linked’ to the Top of page with the following custom code added to the code panel
[as shared in my original post] ~
exportfunction shape31_click(event) {
wixWindow.scrollTo(0, 0, {"scrollAnimation": false
};
In this case, the ‘PROBLEM’ comes into play with POINT 2 - in the sense that …
-
NO PROBLEM - The page jumps to the Top
-
PROBLEM - The Header (hidden by the scroll down action) DOES NOT GET revealed - even after the page has ‘arrived’ (jumped) to the Top position
-
NO PROBLEM - The page scrolls up WITHOUT ANIMATION - that is, it JUMPS to the Top - as intended
Any suggestions/ guidance would be much appreciated.
Thanks in advance…
~ @Aaditto (For bablifarm)
Perhaps you can use something like this…
https://russian-dima.wixsite.com/meinewebsite/header
Thank you for responding @russian-dima …
I’ve been trying to adapt your code to solve my problem… but it’s not really working, so far!
As far as I can understand - the real ‘issue’ is arising from the ’ Header Scroll Setting ’ that is applied to my header… clashing with the <{“scrollAnimation”:false}> part of my code.
There are four options - your code is partly functional , depending on the CHOICE - as follows :-
’ Header Scroll Setting ’ Options ~
-
Scrolls with site ~
-
Your code works - only with viewport on TOP of page - when scrolled down , your code works - but header items can’t be seen
-
My code works - but the original intention is lost - i.e. to hide the header on scrolling away form the top.
-
Freezes ~
-
Your code works - in any position
-
My code becomes redundant
-
Disappears ~
-
Your code works - only with viewport on TOP of page - same as 1. above
-
My code does not work - since the < { “scrollAnimation” : false } > part of my code prevents the header from being displayed - I think!
-
Fades out ~
-
Your code works - same as 1. & 3. above
-
My code does not work - same as 3. above
This is a dummy copy of my site (homepage) with the DISAPPEAR option chosen for the Header Scroll Option (which is what I want)
If you play around with that page (link above), you’ll see ~
-
Show/Hide buttons (frozen on left margin) - YOUR CODE
-
Dark blue Down Arrow - to take you to the bottom of the page - WIX INBUILT LINK added to this
-
When you reach the bottom of the page - ROUND ICON with UP ARROW - MY CODE
As you will see, the required effect is NOT BEING ACHIEVED…
This is a release-version copy of the above site with the SCROLLS WITH SITE option chosen for the Header Scroll Option (which is NOT what I want)
Here, your-code buttons still can’t show the header, when viewport is not on top of page - my button works - but the original purpose has been lost!
ANY POINTERS AS TO WHAT COULD BE DONE TO RECTIFY THE ISSUE WOULD BE OF GREAT HELP!
Another little thing about your code - which I’m a bit foggy about…
export function button2_click2(event) {
show_Header()
}
Why is this a “click2” event?
[Rather than just a “click” event… ]
Apparently the the only onClick function of the button is showing the header, isn’t it?
What am I missing?
[Sorry if that’s a stupid question! I am a complete novice at coding - trying to learn the ropes as I go along, with a JavaScript for Dummies, and my hands on experiments here…]
Cheers!
And thanks again…
Ok, you are writing a lot of text to explain your issue. In the most of cases i would say —> the more informations —> the better it is.
But in your case, there are already too much of informations.
You could also describe your issue in few sentences like…
What i want to achieve is…
- …when click on a button or shape (element) i want to navigate to a custom screen-position.
- …when the screen-position leaves a certain screenarea, or the “go-to-bottom-button” is clicked —> the header should be closed.
- …when reaching back a certain screen-area, or press on the “go-to-top-button”, the page should scroll back to top and the header should apear.
- All action should be done without any scrolling animation.
Is this what you want to achieve???
If so, than take a look here onto this example…
https://www.media-junkie.com/show-hide-header
To ahieve this function, you will need to place 2x-anchors onto your page.
One of them —> onto the very top of your Header.
The second one → onto the very top of your page.
And of course some CODE…
import wixWindow from 'wix-window';
$w.onReady(function () {
$w('#iconButton1').onClick(()=>{
wixWindow.scrollTo(0, 0, {"scrollAnimation": false}), show_Header();
})
$w('#iconButton2').onClick(()=>{
wixWindow.scrollTo(0, 2100, {"scrollAnimation": false}), hide_Header();
})
$w('#anchor1').onViewportLeave(()=>{hide_Header()})
$w('#anchor2').onViewportEnter(()=>{show_Header()})
});
function hide_Header() {$w("#header1").children.forEach((item, i) => {item.collapse();})}
function show_Header() {$w("#header1").children.forEach((item, i) => {item.expand();})}
Check it out and test the functionality of the example-page. 
Thanks for your patience, @russian-dima …
I know, my descriptions are becoming really long!
That’s mostly because I have been trying to clarify to you (and J.D. before) - without much success till now - a point which, as far as I can tell, is not about the code .
Rather, I think, it is a clash between an INBUILT FEATURE within the Wix Editor - which I am using/ want to continue using… and the CUSTOM CODE that I am putting into the code panel.
You write ~
What i want to achieve is…
-
…when click on a button or shape (element) i want to navigate to a custom screen-position.
Ans:
YES (go back to top of any page) - element is placed in the footer -
…when the screen-position leaves a certain screen area, or the “go-to-bottom-button” is clicked —> the header should be closed.
Ans:
NO (not exactly) -
I want the header to be HIDDEN when the user scrolls down on any page, at any position on the page - and then the header should SHOW again when the user scrolls up .
This is what the INBUILT FEATURE mentioned above is achieving …
-
…when reaching back to a certain screen-area, or press on the “go-to-top-button”, the page should scroll back to top and the header should appear.
Ans:
NO - for the first part ( back to a certain screen-area ) ~
YES - for the second part ( press on the “go-to-top-button” ) - -
All action should be done without any scrolling animation.
Ans:
ONLY the ’ back-to-top ’ action should NOT have any scroll animation.
When I try to use your custom code (s) WITHOUT disabling the ‘Header Scroll Setting’ - THE CODE DOES NOT WORK ~ as you can see here…
https://babli-farm.wixsite.com/test/home
As far as I can understand -
The way to make the (go to top - without animation - on click of an element) code work is…
-
To set the ’ Header Scroll Effect ’ setting to ’ None ’ - and then
-
WRITE CUSTOM CODE to achieve the " Disappears " effect on the header as well…
So, (a code equivalent of) something like this, if you can suggest ~
window > on scroll DOWN > header1 > hide
window > on scroll UP > header1 > show
Is that even possible?
Thanks again…
Ok, now i am confused 
Please take a look one more time at my example. This time i did not hide my header at all, that means —> the header is right from the beginning VISIBLE.
My header is this PART of my site…(HEADER).
Your request …
window > on scroll DOWN > header1 > hide
window > on scroll UP > header1 > show
Now, when you try to scroll down, the header normaly should disappear (right from the beginning).
And when you scrolled up to back to the top, the header normaly should appear again automaticaly when you reach the very top of your site.
Or do you want to let the HEADER immediately appear, while you are scrolling up ?
“Or do you want to let the HEADER immediately appear, while you are scrolling up ?”
Yes, exactly.
It should appear (anywhere on the page) - when user scrolls UP - and disappear (anywhere on the page) - when user scrolls DOWN
And that’s exactly what the Wix Editor > ‘Header Scroll Setting’ > ‘Disappear’ setting IS ALREADY DOING - ( HERE ).
If you go to that link and scroll down and up on the page (with mouse wheel/ keyboard) - you will see the effect working.
But the minute my BUTTON (with custom code) is clicked - the header refuses to show…
That’s why I was thinking, if I can create that same scroll-effect for the header - instead of using the Wix Setting - then, maybe
both the scroll-effect for header, as well as the jump to top without animation, would work?!
That’s why I though if the following was possible with code…
window > on scroll DOWN > header1 > hide
window > on scroll UP > header1 > show
var scrollDirection
var scrollPosition = 0
var scrollInterval = 500 //The lower the scrollInterval, the more precise will be the scroll-position.
$w.onReady(function () {
setInterval(show_scrollPosition(), scrollInterval);
})
function show_scrollPosition() {
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
console.log(scrollX, scrollY)
if (scrollPosition !== windowSizeInfo.scroll.y) {
if (scrollPosition < windowSizeInfo.scroll.y) {scrollDirection = "DOWN", console.log(scrollDirection)}
else if (scrollPosition > windowSizeInfo.scroll.y) {scrollDirection = "UP", console.log(scrollDirection)}
scrollPosition = windowSizeInfo.scroll.y;
}
});
}
Wow! Thanks for all the time and effort you are spending on this @russian-dima !!!
Can’t say I understand every part of that last code you posted…
But, from what I can make out, this code ‘sets up a function’ which tells the browser (?) whether the page is scrolling ‘UP’/‘DOWN’, at any given point of time while the user is navigating the page??
If I’ve got that right - then, there will have to be another code which ‘calls’ this function and SHOWS/HIDES the header depending on which direction the page is moving - right?
Also, (assuming I have understood the logic correctly up to this point)… this code, as well as the other code ( I have no idea what that should be !) will go into the ’ masterPage.js ’ part of the code panel - so that it works for any page of the site - correct?
This Code not just shows the direction, it also shows the exact position while scrolling
So, how do I call this code (function?) to make the header disappear when scrolling DOWN - and appear again whenever page is scrolled UP… ?
Did you take a look onto CONSOLE?
Scroll up and down and see what happens in the CONSOLE.
Which results do you get?
Then set the scrollIntervall to 100 and do it again.
Then set the scrollInterval to 50 and do it again.
Then set the scrollInterval to 25 and do it again.
Now you should recognize how it works.
Sorry for the delay in providing the feedback you asked for @russian-dima …
I’m not sure what you mean by “CONSOLE”…
(A) Wix Editor > Preview > “Developer Console”?
(B) Google Chrome (Browser) > Published Site > Inspect > Console?
With (A)…
-
The Developer Console loads with displaying the x & y position where I was on the Editor, at the point of loading + the word “DOWN” only if the y-position is NOT zero (Image 1 below)
-
If I go into preview with page at x=0 y=0 - then, the Developer Console only shows “0 0” (Image 2 below)
-
Nothing happens when I scroll up/down…
Image 1
Image 2
With (B)…
-
The Console tab shows lots of ERRORS (“4 errors” in red + “6 warnings” in yellow… (+User messages… Info etc…)
-
There is one line - saying “console.js:35” on the right margin - where it is displaying “0 0” - which I am guessing is the x=0 & y=0 values when the page loads
-
When I scroll up/down… MORE warnings appear, below the “0 0” line (Image 3 below)…
These warnings read -
"DevTools failed to load SourceMap: Could not load content for https://static.parastorage.com/services/wix-ui-santa/1.1539.0/wixcode/wixcode-components.bundle.min.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE"
Image 3
