0

I am building a webpage using html and css. Every time I refresh the page in Opera, the page refreshes to the bottom. Is this just a thing in Opera? It doesn't seem to happen when testing the page in other browsers.

Yehuda Gutstein
  • 381
  • 10
  • 27
  • What do you mean by "refreshes to the bottom"? Do you mean the browser viewport jumps to the bottom of the page? If so, then this might be because you have a fragment identifier `something.html#foobar` in your URI. Simply remove it. – Dai Sep 07 '12 at 18:40
  • Honestly, I'm new to doing webpages this way. I've mostly just used templates in Dreamweaver in the past or Wordpress. Would you mind please explaining about the URI? Thanks – Yehuda Gutstein Sep 07 '12 at 21:00
  • When you specify a "fragment identifier" in a URI (which is the optional part after the `#` character) the browser's viewport will jump to the location in the webpage where there's an element with an that `id=""` attribute. Like how permalinks on forums are like "viewthread?threadid=123&page=2#post123" (there will be a `
    ` on that page, and the browser will jump to it.
     – Dai Sep 07 '12 at 21:18
  • So what I just noticed was this: I have links in my menu that redirect to various locations on the page. The browser will refresh to the location of the last link clicked by the user. (I'm not sure if I am making any sense in explaining this). – Yehuda Gutstein Sep 07 '12 at 21:34
  • Yes, that sounds right. That's because you have the fragment still in your browser address bar. – Dai Sep 07 '12 at 21:37
  • I got rid of that fragment and I'm still having the same problem--but it actually seems to be in all browsers. Thanks for the advice so far btw. – Yehuda Gutstein Sep 07 '12 at 22:08

3 Answers3

1

Another possibility is that you're refreshing the page while you're scrolled to the bottom. In most of the modern browser when you refresh or hit the back button in the browser, once the page (re)loads it will jump to the most recent scroll position. Just scroll back to the top if before refreshing and see if that changes anything.

Scrimothy
  • 2,536
  • 14
  • 23
0

You can add a Javascript that does set the scroll to the top

like :

function scrollWindow()
{
window.scrollTo(0,0);
}

you can catch the onLoad event and call that function, this way each time you refresh your browser it will scroll to the top.

I used the w3schools site.

Mehdi Karamosly
  • 5,388
  • 2
  • 32
  • 50
0

Here is a method:

Expected outcome:

  • No scroll animation
  • Loads at top of page on first load
  • Loads on top of page for all refreshes

Code:

<script>
    history.scrollRestoration = "manual";
</script>

Why this may work over other methods:

Browsers such as Chrome have a built-in preset to remember where you were on the page, after refreshing. We need to add:

history.scrollRestoration = "manual";

to disable that built-in feature. The outcome is loading at the top of the page after every refresh.

References:

My original answer post about this regarding loading the page at the bottom, rather than the top: https://stackoverflow.com/a/66825027/15489646

Documentation for history.scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

ObjectJosh
  • 601
  • 3
  • 14