Load page at the top when the user refreshes

Design help Custom code
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: Primens – Proyectos | Jonathan Centeno

Thanks,
Jonathan

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

1 Like
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>
2 Likes
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: Sobre mí | Jonathan Centeno

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;
1 Like
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?

1 Like
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 On Page Refresh, Start From Top of Page

5 Likes
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!

1 Like
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: Screen capture - 4e351edad603bf6b0c6c72dc41768732 - Gyazo

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? Screenshot - e2408134f552c952bcead506e2fa10e1 - Gyazo

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

1 Like
15

Man, it works perfect. You are awesome.

Once again, thank you very much. :relaxed:

Regards,
Jonathan

16

Hey,
Thats great! thank you Samliem.

It is working for me on desktop but not on mobile…

17

It almost works for me too, but as soon as I use the back button in the browser the body is still hiding.
I’m not a developer, but is this a good solution??

function applyBeforeunload() {
$(window).on(‘beforeunload’, function() {
$(‘body’).hide();
$(window).scrollTop(0);
$(“body”).show();
});
}

18

Or is there a better solution in the meantime?

And why don’t I have this problem on every website I’ve created?
Is that due to the use of, for example, Sticky or an Animation?

1 Like
19

i’m curious as well. Hopefully someone can help with a solution. but right i guess it could be the animation even in my case.