How to make the page load scrolled down to
when loaded?


Tags: javascript,html,css

Problem :

I need to make sure that a specific line is visible when the user loads the page, even if that line appears many lines later in the page. In other words, when the page loads, it instantly jumps to that marked line. The line simply needs to be somewhere within the visible screen of the browser window. It is marked like this:

<div class="scrollhere">This line should always be visible when the page loads.</div>
  • Only one of these appears on the whole page.
  • I cannot edit the HTML marking the text, but can edit the CSS and JavaScript at the beginning of the document.
  • I do not mean for just that specific line to be moved, i.e. with position:absolute, but that the page loads to that line.

How can I make the page load mid-way down the page, wherever a specific <div class="scrollhere"> is found?



Solution :

So if you can't edit the HTML at all, then you'll need to use JavaScript or jQuery. This is a function that I've used to scroll to an element.

Javascript

This will query the DOM for all elements that have your class scrollhere. And we'll select just the first item in the array (to go to the first element). Then we'll use the scrollIntoView().

document.getElementsByClassName('scrollhere')[0].scrollIntoView()

jQuery

/*
 * A scrollTo function that gets passed a selector (ID, class, element) & an optional offset
 *
 * @param {string}  location ('#resultsTop')
 * @param {integer} offset   (-100)
 */
function scrollTo(location, offset) {
    $("html, body").animate({scrollTop: ($(location).offset().top + (offset || 0) )}, "slow");
    return false;
};

In your case, you'd call this function as follows:

scrollTo('.scrollhere');

You could also optionally pass in an offset. So maybe you don't want to scroll to the top of that element. But would rather scroll to 100 pixels above it.

scrollTo('.scrollhere',-100);

And being that you can't edit the HTML, then you'll definitely want to use a listener.

$(document).ready(function(){
  scrollTo('.scrollhere',-100);
});

    CSS Howto..

    how to set the font-family like a digital clock CSS? [closed]

    Trade off for CSS sprites: how many images to combine into one

    How to place inline-block divs one per line with CSS? [closed]

    How to separate settings and css in a less?

    I have a white icon - how to make it black without replacing it with CANVAS? It is a .png icon

    How to resize parent div while keeping dynamic child divs 100% height

    How to add numbered list style in div tag

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to convert an element css to JSON? [duplicate]

    How to disable inline CSS position attribute

    How to stop html/css object from resizing

    How can I click a specific li without an id or class?

    Quick beginner CSS, how to “scope” styles?

    My sidebar is going over the footer. How can I sort this out?

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How to maintain table row height in scrolling window - Firefox?

    c# cassette - how to create different css bundles for different pages

    How can I select second element and after that in CSS?

    how to zoom in an image and center it

    How to align image and text for my html/css

    How do I change phpmyadmin font size for sql query box?

    how to combine multiple css class selectors into one?

    How do you add a footer with css display: table?

    How to change buttons to pictures in jquery dialog

    How to add dynamic CSS source urls in Squishit?

    How do I organize imports in Compass/Blueprint?

    How to fix IE support for line break using CSS pseudo-element?

    jQuery hide show id

    How to make a block element adjust to the size of what is inside it?

    How to get All Defined CSS Selectors for a given DOM Element?