Page reload with correct scroll position

Question

I want to reload a webpage to the same scroll position, using

document.location.reload();

Works like a charm in all browsers except Edge. Edge refreshes to the top of the page.

Sample code:

<html>
<head>
    <style>
        body { padding-top: 150%; }
    </style>
    <script> 
    function locationreload() { 
        document.location.reload(); 
        } 
    </script> 
</head>
<body>
    <button onclick="locationreload()" >
        Reload
    </button>
</body>

How to fix it?

Possible duplicate of [Refresh Page and Keep Scroll Position](https://stackoverflow.com/questions/17642872/refresh-page-and-keep-scroll-position) — axel axel, Jun 06 '19 at 12:49
I test the answer from the thread suggested by @axelaxel and find that it is working in Edge too. So it can help to solve the issue for Edge. If you are available to use JQuery than you can also refer this example. Ref: https://codepen.io/patrickkahl/pen/KFmAb — Deepak-MSFT, Jun 06 '19 at 13:53

score 1 · Answer 1 · edited Jun 06 '19 at 15:47

1

Actually that function doesn't work on edge. You can save the scroll position in the localStorage and set it back when the page loads.

function locationreload() { 
    window.localStorage.setItem('position', window.pageYOffset);
    window.pageYOffset = window.localStorage.getItem('position');
}

edited Jun 06 '19 at 15:47

Charlie

22,886
11
59
90

answered Jun 06 '19 at 13:04

Darshana Pathum

649
5
12

score 0 · Answer 2 · answered Jun 06 '19 at 12:48

0

well you could save the scrollTop of the page in the localStorage and scroll to that position on window reload.

answered Jun 06 '19 at 12:48

Eugene Ghanizadeh Khoub

897
5
16

Page reload with correct scroll position

2 Answers2