Starting a page at a certain scroll point

javascript html css web

75,266

Solution 1

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)">

Solution 2

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.

Solution 3

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;
}

// 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

Solution 4

These are very simple tricks for that:

Create css offset class and assign to the body
```
.offset{
     margin-top:-500px;
    }
```
So that body will be loaded with 500px offset from top

Then add following code to the body

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

then using jquery, remove offset class when page is loaded

$(document).ready(function(){
   $(".row").removeClass("offset");
});

Solution 5

HTML - Named anchors

You can also make use of good old anchors. Define a named anchor using

     <a id="start">any text</a>

This should be defined at the point that has to be in view. As it can be in view even at the bottom of the screen, you might have to give anchor a little below than required. That way we will make sure that contents on top that need not be shown are well hidden. Once it is defined to scroll down when the page gets loaded, URL should be page.aspx#start instead of page.aspx

<a href="#start">access within the same page</a>

<a href="page.aspx#start">access from outside the page</a>

View more solutions

75,266

Author by

aroooo

merge keep

Updated on January 06, 2022

Comments

aroooo over 2 years

Is there a way (with CSS3, JS, or anything in between) to get a page to start at a certain point scrolled down?

I'd like for my page to load without the header initially displaying on load (meaning it's above the actual viewport of the user).

Is there a simple/easy way to go about this?