'Why is my Visual Studio Code Live Server jumping to specific parts of the page on save?
OK, so this drives me nuts: When I'm using Live Server, it starts jumping up, or to specific parts of the page, when I (or the 'auto save') save my CSS or SCSS file. When I'm just refreshing the page in my browser manually or even saving my HTML file, or any other file than CSS or SCSS, it is all fine. Nothing jumps, and it stays where it’s supposed to stay.
Some things I've found out: When I'm adding images to my site through HTML (usually under my 'hero page', so one is then able to scroll down) it stays where it is. But the moment I remove the HTML images and let’s say replace them with background images in CSS or SCSS, it starts jumping to the top again. It appears that the live server targets the images, which I cant figure out why.
I'll include a link to a project I did for fun where this occurs. You can just uncomment the images in HTML and see for yourself. Download example.
Solution 1:[1]
Put a tick in the Live Server settings - opposite Settings: Full Reload and restart it.
Solution 2:[2]
Visual Studio Code, Settings ? search for "Live Server" ? find Full Reload ? make sure it’s checked.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Peter Mortensen |
| Solution 2 | Peter Mortensen |