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?
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)">
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.
You can use window.scroll(x,y) on page load.
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();
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");
});
<body onLoad="window.scroll(0, 150)"> the page scrolls when load is completed which is annoying for the users.
offset class should probably only be added via JS in the first place – otherwise, when JS is not available the margin-top:-500px will stay in place and will make the first 500 pixels of content unreachable by scrolling … (And using vanilla JS and “old-school” event handling for the scrolling, but then jQuery for the class removal doesn’t make the most sense either – why not both the same way?)
when JS is not available the margin-top:-500px will stay in place and will make the first 500 pixels of content unreachable by scrolling, that's the way it is. See 500px profile for example.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>
Using javascript scrollBy. For this method to work, the visible property of the window's scrollbar must be set to true. So make sure you page is long enough for the vertical scrollbar to appear.
<html>
<head>
</head>
<body onLoad="window.scrollBy(0,100)">
<div style="height:300px;"> Some text </div>
<div style="height:900px;"> Some text 2 </div>
</body>
</html>
Use Javascript window.scroll:
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('something').hide();
}
else{
$j('something').show();
}
});
This work to me.
<div class="demo">
<h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('.demo').offset().top
}, 'slow');
});
</script>
Thanks.
there is a function in jquery called .scroll().. You can use that function to make your header visible only when user scrolls the site..
The Combined Solution
Every single JavaScript-first solution may (and usually does) lead to a hiccup before the pageLoad event. As Uday suggested, the best way to achieve seamless scrolled load is to employ the negative css margin.
Personally, I use a code snippet similar to the one of Uday, however slightly tweaked to make it work in browsers without JavaScript and not to repeat the scroll declaration.
<!doctype html>
<html>
<head>
<style>
/* Can be in an external stylesheet as well */
/* This is the ONLY place where you will specify the scroll offset */
BODY.initialoffset {margin-top: -100px; /* Or whatever scroll value you need */}
</style>
<noscript>
<!-- Browsers without JavaScript should ignore all this margin/scroll trickery -->
<style>
BODY.initialoffset {margin-top: initial; /* Or 0, if you wish */}
</style>
</noscript>
</head>
<body onLoad = "(function(){var B=document.getElementsByTagName('body')[0],S=B.currentStyle||window.getComputedStyle(B),Y=parseInt(S.marginTop);B.className=B.className.replace(/\binitialoffset\b/g,'');window.scroll(0,-Y);})()">
</body>
</html>
The short self-calling function in the onLoad attribute can be expanded as follows:
(function(){
/* Read the marginTop property of the BODY element */
var body=document.getElementsByTagName('body')[0],
style=body.currentStyle||window.getComputedStyle(body),
offsetY=parseInt(style.marginTop);
/* Remove the initialoffset class from the BODY. (This is the ugly, but everywhere-working alternative)... */
body.className=body.className.replace(/\binitialoffset\b/gi,'');
/* ...and replace it with the actual scroll */
window.scroll(0, -offsetY);
})()
I found @bryanbraun's suggestion very useful. I found that removing the window.scroll produces a nice effect for hiding a nav bar. I've simply added this to the head of my doc:
<script>
function restoreSkippedContent() {
var hidden = document.querySelector('.onScrollHide');
hidden.classList.add('unhide');
// window.scroll(0, hidden.offsetHeight);
};
</script>
<style>
.onScrollHide {
display: none;
}
.unhide {
display: unset !important;
}
</style>
and then added a wrapper around my nav bar and an onscroll trigger rather than an onload:
<body onscroll="restoreSkippedContent()">
<div class="navBarContainer onScrollHide">
<nav> .... </nav>
</div>
...
</body>
This the nice effect of not causing any interruption to the user, but when they scroll up they see the nav bar :)
It's currently in use here
I had the exact same problem mentioned in the question :
"I'd like for my page to load without the header initially displaying on load"
I'm not a Javascript guru but I think I found a clever way of doing this, as the other answers did not satisfy me with the end result. Here's my way:
CSS :
#header {display:none}
JS :
window.onscroll = function() {document.querySelector('#header').style.display = "block"}
window.onload = function () {window.scrollTo({top: 1,behavior: 'smooth'})}
Here is a video preview on a website I run.
It's perfect to me. The 1 pixel scroll down is really not a deal breaker imho, almost impossible to notice, and allows to be able to scroll top directly.
function ScroolPositionButtom() {
var elment = document.querySelector(".right .chat.active-chat");
elment.scrollTo(0, elment.scrollHeight);
}
This is work for me. I use this function for a specific class.
