2

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Bioheater
  • 21
  • 2
  • Just for thinking: Do you use anchor links (i.e. `` or just `Dummy Link on page without target`)? Something like that happens if you have clicked on such a link, than scrolled the page when work is on progress ... and than reload the page ... (like Live Server does). – Brebber Mar 18 '21 at 11:34
  • I got dummy links on the page. The thing is it has something to do with the style documents, in some way they are weirdly linked or something like that i have no clue. Because saving the html document causes no page-jumping what so ever. – Bioheater Mar 18 '21 at 11:56

2 Answers2

2

Put a tick in the Live Server settings - opposite Settings: Full Reload and restart it.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
David Moravec
  • 21
  • 2
1

Visual Studio Code, Settings → search for "Live Server" → find Full Reload → make sure it’s checked.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
abdullah gharbain
  • 165
  • 5