Live Server reload keeping the scroll position

[tscabral1]

How can I make Live Server reload my page, but keep the scroll position on Chrome. For example, if I'm working on the footer, and the page reloads, it scrolls right up and I have to scroll back down every time.

I'm using version 70.0.3538.77 of Chrome and version 1.28.2 of VS Code.

Thanks a lot!

[rjoydip-zz]

Can you produce something?

[gassiss]

It's happening with me also, you can check the code I'm working on in my repo here.

I also noticed that this only happens when I update the CSS file. If I save the HTML being served it doesn't scroll back.

OS: Ubuntu 18.04.1 LTS Chrome version: Version 70.0.3538.110 (Official Build) (64-bit) VS Code version: 1.29.1

[AhmedAGadir]

im facing the same issue too

[izeRR]

Me either unfortunately, it's really annoying, I've tried set liveServer.settings.fullReload to true, but it didn't work too. Like gassiss wrote, the issue is happening with CSS files, HTML and JS are fine. OS: Windows 8.1 VS Code version: 1.30.1 Chrome version: 71.0.3578.98

Happy New Year!

[DAV95s]

it's terrible =(

Windows 10 Chrome 71.0.3578.98 VS Code 1.30.2

[fanfare]

https://github.com/tapio/live-server/issues/273#issuecomment-471229763

[darrenbarklie]

Thanks a lot for this @fanfare! Thought there would be more complaints about this issue. Frustrating on every single refresh.

To apply to VS Code extension, navigate to: ~/.vscode/extensions/ritwickdey.liveserver-5.6.1/.vscode/extensions/ritwickdey.liveserver-5.6.1/node_modules/live-server/injected.html

[BoraDev]

@fanfare thanks, it works for me too.

[pjpro]

Brackets preview is very good! Got a similar viewer for vscode?

[nancologist]

Hey I got a solution! .... imagine in HTML you have a <link> which imports your style.css ,

1. set the full Reload in VSCode for LiveServer to true/enable it (If i am not clear enough search it)
2. under your CSS <link> open a <style> and make your rest of your style sheet implementation there, now it is not jumping up everytime , and then cut paste these changes to your real css file.

[mikael1000]

I'm also really annoyed buy this.

EDIT: I just had to tick the box in settings that says Settings: Full Reload. Do not need to hack it more. In Visual Code.

[webenadam]

I'm having the same problem and unticking the "Full reload" option doesn't work for me (on Mac Chrome).

[idChef]

I'm having the same problem and unticking the "Full reload" option doesn't work for me (on Mac Chrome).

I know this is kinda old but it might be useful for someone. Basically what I did is set body to min-height: 100% instead of height: 100%

[TamirCode]

2021 this problem still exists, why dont they fix it by default

[idChef]

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

[TamirCode]

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

I think my issue is with SASS live extention

[mikael1000]

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

I think my issue is with SASS live extention

Why did you put a thumb down on my post? Didn't my solution work for you?

[ShivamSGokarankar]

How can I make Live Server reload my page, but keep the scroll position on Chrome. For example, if I'm working on the footer, and the page reloads, it scrolls right up and I have to scroll back down every time.

I'm using version 70.0.3538.77 of Chrome and version 1.28.2 of VS Code.

Thanks a lot!

What's work for me is Add this script to your html head section

[arensonzz]

Using --no-css-inject command line option when running live-server solves this issue for me. It reloads page instead of injecting CSS and my browser (Firefox) keeps scroll position the same during reloads.

[kunalpal101]

body to min-height

DUDE!! Thank you!! This worked for me, when nothing else was Thank you soo much.

[edo979]

I use sass and live sass compiler and have same problem. Then I activate css map option and page scroll don't reset on refresh.

[GODxMessi]

I'm also really annoyed buy this.

EDIT: I just had to tick the box in settings that says Settings: Full Reload. Do not need to hack it more. In Visual Code.

its really good advice its work for me thank u so much. 😇😇😇

[KrystalJean]

Me either unfortunately, it's really annoying, I've tried set liveServer.settings.fullReload to true, but it didn't work too. Like gassiss wrote, the issue is happening with CSS files, HTML and JS are fine. OS: Windows 8.1 VS Code version: 1.30.1 Chrome version: 71.0.3578.98

Happy New Year!

Make sure to close and reopen live server for the effects to take place.