HTML hash url anchor to be centered in the page - html

Question

I am wondering how can I override the HASH url behavior. Right now when I use #comment122 it will take me to comment 122 in my page, but it will place the #comment122 very high on top, and half the li is not showing. Here is an example:
<ul>
<li><a id="comment122">comment content</a></li>
<li><a id="comment123">comment content</a></li>
</ul>
Basically, what I want to achieve is every time I visit a hash url, I need it to scroll a few pixels more so the element will be centered in the page. Any advice?

Answer 1

You'll need to use JavaScript for this. Get the CSS top property of your element first
var scroll_object = $("#comment122").offset();
var scroll_height = scroll_object.top;
If you want to center your object in the middle of the page, you'll need to scroll the page less than the actual top property value of the object.
var scroll_height = scroll_height - 300;
The above will set the scroll to 300px above your element.
Finally, scroll the page.
window.scrollBy(0, scroll_height);
This solution uses jQuery :)

Answer 2

When the click event is triggered, you need to get the height of you target element (assuming you're only scrolling vertically), subtract it from window.innerHeight and divide it by two. Then you need to subtract that from the element's offset relative to the top of the window. That would give you the exact amount of pixels to vertically centralize the element on the screen.
Assuming you're using jQuery, here's a simple example:
$(document).on('click', 'li a', function(e) {
e.preventDefault();
var target = $($(this).attr('href'));
$('html, body').animate({
scrollTop: target.offset().top - parseInt((window.innerHeight - target.outerHeight()) / 2, 10)
}, 300);
});
Here's a fiddle with the working example: http://jsfiddle.net/FJBXg/
The same logic could be used to intercept a loading page with a hash on it's URL, so you could animate the page to the element on the URL's hash. But I'll leave that to you.

Answer 3

2021 Method
Below is a method that uses new web features. It blocks the normal link action and scrolls smoothly to a centered position.
You might need to use this polyfill on browsers that aren't super new.
document.querySelector('a[href^="#"]').addEventListener('click', (e) => {
e.preventDefault()
document
.querySelector(e.currentTarget.getAttribute('href'))
.scrollIntoView({
behavior: 'smooth',
block: 'center'
})
})
.filler {
/* CSS Pattern by Logan McBroom (http://logan.mcbroom.me/) */
background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444;
background-size: 16px 48px;
height: 5000px;
}
<a id="firstlink" href="#thespot">Scroll <i>smooth</i> and centered.</a>
<br/><br/>
Scroll classic <b>janky headbutt</b> style.
<br/><br/>
<div class="filler"></div>
<p id="thespot">jump to me!</p>
<div class="filler"></div>