Scrolling on load if page has Hash

Question

This sounds very specific, but it likely occurs any time someone is using a fixed element as a page header and wants to use # in the url to direct users to particular element in the html.

I'm trying the following. It displays the alert (used for bug checking) but doesn't scroll:

window.onload = function onload()
{
    if(window.location.hash)
        {
            alert("test");
            window.scrollBy(0, -300);   // The height of my header is 300px
        } 
}

Is this an okay approach an I'm just missing something? Is there some bug about trying to scroll on page load? Is the scroll somehow overwritten by the # direction. Is there just a syntax error? is there a better approach to solving this altogether?

Possible duplicate of https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header. — Halim Qarroum, Aug 14 '15 at 23:18
Can you be more specific about what you're trying to accomplish? I put this code in and the scrollBy works. With -300, it scrolls 300 pixels up from wherever it goes to due to the #. — Tony Hinkle, Aug 14 '15 at 23:28
...and if you're wanting it to scroll down, then don't use a negative number. — Tony Hinkle, Aug 14 '15 at 23:29

score 0 · Answer 1 · answered Aug 14 '15 at 23:28

0

you could include jquery here:

After that wrap your scrolling thing in a document ready function:

$(document).ready(function(){

window.scroll(0,300);

});

then after that you don't need to do anything.

answered Aug 14 '15 at 23:28

anam

216
1
2
14

score 0 · Answer 2 · answered Aug 15 '15 at 02:49

You can define add the same ID to the element for example:

<div id="header-area>
   <h1>Awesome Page</h1>
</header>

<div class="content">
<div>

<div id="move-to-footer"
</div>

And have links like:

That will move you to the div or HTML tag with that ID.

Scrolling on load if page has Hash

2 Answers2