Starting a page at a certain scroll point

HTML/DOM Solution

If you have an id given to a div that contains your content after the header, then you can probably load the page with a URL of this kind, http://website.com/page#id.

This will take you to the point where the div is present.

Javascript Solution

You can use window.scroll(x,y) on page load.


You can use standard javascript: window.scroll(x, y).

This should work pretty well considering that you'll be doing this at onload, i.e. the window should begin at (0, 0). Play around with (x, y) until you get your header to the position that you're happy with. Naturally you'll need to change it anytime the header moves.

Example:

<body onLoad="window.scroll(0, 150)">

The current answers result in a noticeable "jump" down the page, or require you to know the exact pixel number you want to jump.

I wanted a solution that jumps past a container, regardless of the size/contents of the container, and here's what I came up with:

HTML

<div class="skip-me">Skip this content</div>

CSS

// Hide the content initially with display: none.
.skip-me {
  display: none;
}
.unhide {
  display: block;
}

JS

// Unhide the content and jump to the right place on the page at the same time
function restoreAndSkipContent() {
  var hidden = document.querySelector('.skip-me');

  hidden.classList.add('unhide');
  window.scroll(0, hidden.offsetHeight);
};
restoreAndSkipContent();

Working Demo Here

Tags:

Javascript

Html

Css

Web

Recent Posts