Streaming live at 10am (PST)

Load page at the top when the user refreshes


#1

Hi!

I would like that, when the users has already scrolled on the page and refreshes it, the page loads once again at the top.

Is there any way to achieve that?

I have tried this code, but there’s a weird jump.

window.onbeforeunload = function() {window.scrollTo(0,0);}

Here is the link to see this code working: http://portfolio-fa93f5.webflow.io/proyectos/primens

Thanks,
Jonathan


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You can set body opacity to 0 by default, then scroll to page top on load, then use JS or an interaction to unhide body.

<script>window.scrollTo(0,0);</script>

#3

Wow, I had not fallen in that. I’m goint to try it.

Thanks @samliew :slight_smile:


#4

I have tried but it’s not working. Maybe I’m doing it wrong. This is what I have done so far:

1- Add body opacity to 0 as initial appearence on the trigger.
2- Add this lines of code to the footer (the once you give it to me don’t work):

<script>
$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
</script>

3- Finally, when the page finishes loading, I unhidded the body.

I don’t know what’s wrong, but the problem persists: http://portfolio-fa93f5.webflow.io/sobre-mi

Thanks,
Jonathan


#5

The one I posted above should work. The one you posted is incorrect.

Also you have an error here, as there is no project-name element on the home page. Since there is an error, the script halts there and won’t continue. See developer console for error details.

var str = document.getElementById("project-name").innerHTML;

#6

Completly forgot to delete that code, sorry. I’ve changed to yours but nothing happens…

Take a look if you can.

Sorry and thanks for your time,
Jonathan


#7

What interaction are you using to unhide the body? Are you using on page load or after content load?


#8

Alright, I’ve played around a bit more and figured this might be the best solution that is consistent:

$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});

see http://sandbox-666666.webflow.io/on-page-refresh-start-from-top-of-page


#9

Wow, it works perfect!!! :smile:

Thanks a lot for your time @samliew, you are awesome!! :slight_smile:

Link: http://portfolio-fa93f5.webflow.io/

Have a nice day,
Jonathan


#10

Ah, after viewing your site, I now understand why you need this.

Well done on the animations!


#11

Thanks a lot @samliew :slight_smile:

Forgive me bothering you again :frowning:

Today I’ve noticed a problem that originates this code. When clicking on the mailto (at the footer of the page), it just loads the page and makes the body hidden. I think I need something that unhides it when clicking this property to deny the other script. I have almost none javascript knowledge. Could you help me with this?

Here is what I mean: https://gyazo.com/4e351edad603bf6b0c6c72dc41768732

Thank you,
Jonathan


#12

Hmm usually what I’ll do for mailto: links is to open them in a new tab/window. You might also want to remove it since you have a contact form, and avoid email harvesters from capturing your email address for spam purposes.


#13

Do you mean this? https://gyazo.com/e2408134f552c952bcead506e2fa10e1

The problem with that “open on a new window”, is that opens a blank window without sense.

In my experience, there are some users that hate forms and prefer to contact directly from their personal mail. In fact, I’m one of them :joy::joy:


#14

Updated sandbox page


#15

Man, it works perfect. You are awesome.

Once again, thank you very much. :relaxed:

Regards,
Jonathan