CODEWITHSUNDEEP
javascripthtmlcssbookmarks
canihavesomecoffee
canihavesomecoffee

Reputation: 165

How to control the jump to a bookmark inside a page

I'm trying to achieve a page with a certain number of divs, each of which has a bookmark (a name). The problem is, when I jump to one of the bookmarks, part of the text is gone, caused by the design. I'd like to know if there's a way to change the behaviour of the bookmark, so it won't set the start of it at the top of the page, but a set number of pixels below.

The page can be accessed here: Not longer online, sorry.

The behaviour occurs when you go to any of the bookmarks (except #6, because the document ends there), like on here: Not longer online, sorry.

Can this be solved by a css property or any other way? (update) I'd prefer this over a javascript solution because I'm planning to use javascript to tab them, and keep the bookmarks in case of disabled javascript

Upvotes: 0

Views: 1159

Answers (3)

canihavesomecoffee
canihavesomecoffee

Reputation: 165

I got the answer myself, so this is basically for references.

To ignore the 100px offset that is caused by the header, I added a padding-top of 100px to each single div element, and then I changed the links to go to the div's instead of the a elements I added. This padding-top basically makes the text appear where it should and thus solved my problem.

Upvotes: 0

SUDO Los Angeles
SUDO Los Angeles

Reputation: 1635

window.onhashchange = window.onload = function () {
     if( window.location.hash.length && window.scrollY > window.pageYOffset ) {
          window.scrollBy( 0, -100 ); // Scroll up 100 pixels on hash change
     };
};

Upvotes: 0

Ry-
Ry-

Reputation: 225124

You can do it with JavaScript using scrollBy. Put this in a load listener or onload handler:

if(window.location.hash.length > 1) {
    window.scrollBy(0, -60); // Adjust to suit your needs.
}

Upvotes: 1

Related Questions