Onload scroll to top

A common problem when browsing through multiple pages from within an iframe is that all subsequent pages appear at the same scroll position. It is usually more desirable for the pages start back at their top scroll position.

You can force the framed page to scroll to its top by including this code in the framed page's head content:

<body onload="self.scrollTo(0,0)">

or to force the page to scroll to the top of the parent page by inserting the following code in the framed page's head content:

<body onload="top.scrollTo(0,0)">

A scrollable page can be scrolled to the top using 2 approaches:

Method 1: Using window.scrollTo()
The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.

Syntax:

window.scrollTo(x-coordinate, y-coordinate)

Example:

<!DOCTYPE html> 

<html>

<head>

    <title>

      Scroll to the top of the

      page using JavaScript/jQuery?

  </title>

    <style>

        .scroll {

            height: 1000px;

            background-color: lightgreen;

        }

    </style>

</head>

<body>

    <h1 style="color: green">

      GeeksforGeeks

  </h1>

    <b>Scroll to the top of the page 

      using JavaScript/jQuery?</b>

    <p>Click on the button below to 

      scroll to the top of the page.</p>

    <p class="scroll">GeeksforGeeks is a

      computer science portal. This is a 

      large scrollable area.</p>

    <button onclick="scrollToTop()">

      Click to scroll to top

  </button>

    <script>

        function scrollToTop() {

            window.scrollTo(0, 0);

        }

    </script>

</body>

</html>

Output:

Before clicking the button:
After clicking the button:

Method 2: Using scrollTo() in jQuery

In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.

Syntax:

$(window).scrollTop(position);

Example:

<!DOCTYPE html> 

<html>

<head>

    <title>

      Scroll to the top of the

      page using JavaScript/jQuery?

  </title>

    <style>

        .scroll {

            height: 1000px;

            background-color: lightgreen;

        }

    </style>

</head>

<body>

    <h1 style="color: green">

      GeeksforGeeks

  </h1>

    <b>

      Scroll to the top of the page

      using JavaScript/jQuery?

  </b>

    <p>

      Click on the button below to 

      scroll to the top of the page.

  </p>

    <p class="scroll">

      GeeksforGeeks is a computer

      science portal. 

      This is a large scrollable area.

  </p>

    <button onclick="scrollToTop()">

      Click to scroll to top

  </button>

    <script src=

"https://code.jquery.com/jquery-3.3.1.min.js">

  </script>

    <script>

        function scrollToTop() {

            $(window).scrollTop(0);

        }

    </script>

</body>

</html>

Output:

Before clicking the button:
After clicking the button:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Article Tags :

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)

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.

1 Like

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

Thanks @samliew

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):

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

Jonatan_Centeno:

the once you give it to me don’t work

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

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

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

1 Like

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

2 Likes

Wow, it works perfect!!!

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

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

Have a nice day,
Jonathan

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

Well done on the animations!

1 Like

Thanks a lot @samliew

Forgive me bothering you again

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

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.

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

1 Like

Man, it works perfect. You are awesome.

Once again, thank you very much.

Regards,
Jonathan

Hey,
Thats great! thank you Samliem.

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