How to scroll page for XXX px on load

Design help Animations & Interactions
1

Hello, Webflow community & @webflow!

I’m looking for solution with webflow interaction or not to scroll page on load.
Task logic:
– page loads (trigger)
– scroll page from top for 600 px down without moving or scaling and etc. of any element on page.

Thank you in advance.

2

Okay you said a little but still not sure exactly what you’re trying to do. If you could share a read-only link or show a website example on the page load interaction you want.

3

@garymichael1313

I’ve attached screenshot. May be It will now become clearer.
Thank you.

page-scroll-interaction-webflow-cms
page-scroll-interaction-webflow-cms3000×2000 358 KB

4

Ohh… I think I found solution by myself :slight_smile:

Just need to inser script into page head to scroll for 470 px on page load.

<script>
function Scrolldown() {
 window.scroll(0,470); 
}

window.onload = Scrolldown;
</script>

But I think that I steel need your advice, how to rewrite script to change amount of px for page scroll, if it is mobile version on site.

Thank you.

5

Okay glad have it! Hand coding would not be my core skill set… there are others here better suited for that task. I know many will offer help. Just give a shout for that snippet to the community.

6

Does anybody know how to “upgrade” this script to make scrolling animation smooth?

7

I don’t know if it’s still works but put a form text field hidden where you want your scroll to go, and set “Focus” on that field.

Super dirty but used to work :smiley:

8

Hello, @webflow

Can you help me upgrading this script to make smooth page scroll animation on load, because you don’t have such functionality from scratch into your animation webflow function.

Thank you.

9

You can use this for example:

$(document).ready(function () {
$('html, body').animate({
    scrollTop: $('#your-id').offset().top
}, 3000); });

This will scroll the page to the element designated in the “#your-id” part. 3000 - is time of scrolling in milliseconds.

edit: you said you need to move it a certain amount of px’s but I think moving to a particular part of the site is better since it will work on any screen size.

1 Like
10

@dram

Thanks a lot. Do you know how to do it without anchor, using just px?

11

Is there any particular reason why you need to move it a certain amount of px’s rather than to some target? See my edit to previous post.

12

Yes, I guess you’re right with your comment.

Btw, i’ve insert your code to head part on page, but it still doesn’t work.
May be i’ve missed something.

03
032560×722 75.4 KB

13

Put it into the footer (before </body> - it is the field just below the one you have used)

14

Thank you, my friend! That works pretty great!

15

It’s nothing, glad to help, mate!

16

hey dram i know this is VERY old… but I’ve edited your script to the below in order to center my site on a specific DIV at load. It works, but it is putting the DIV at the left of the screen rather than in the center like i hope. any chance you can help me out? I’m working specifically on mobile for this feature btw.

<script> 
$(document).ready(function () {
$('html, body').animate({
    scrollLeft: $('#ball1-mobile').offset().left
}, 3000); });
</script>

TIA so much

Read Only: Webflow - Token Society

Site URL: https://token-society-v1.webflow.io/