Scroll to the center of viewport
Solution 1
In some way you have to identify the clickable elements. I build an example, that uses the class
-attribute for that.
Step 1
This is the script, that does the work:
$('html,body').animate({
scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);
What you tried is to scroll the container to the top of the page. You also have to calculate and subtract the difference between the container height and the viewport height. Divide this by two (as you want to have the same space on top and bottom and you are ready to go.
Step 2
Then you add the click handler to all the elements:
$(document).ready(function () {
$('.image').click( function() {
$('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2 }, 200);
});
});
Step 3
Set up some HTML/CSS:
<style>
div.image {
border: 1px solid red;
height: 500px;
width: 500px;
}
</style>
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
And you're done.
Check out the demo
Try it yourself http://jsfiddle.net/insertusernamehere/3T9Py/
Solution 2
I know this question is old, but right now, you can use scrollIntoView:
For example:
document.body.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' });
Solution 3
HTMLElement.prototype.scrollToCenter = function(){
window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}
Achieved with pure JavaScript for Scrolling to Center in the vertical direction. And it's similar in the horizontal direction. I don't take elements' height into consideration, because they maybe larger than the height of screen.
Solution 4
I've got one slight modification to offer.
If the "adjustment factor" i.e. ( $(window).height() - $(this).outerHeight(true) ) / 2
is < 0
you can get undesirable results whereby you overshoot that element in the viewport with your scroll.
I added a max(0,adjustment factor)
to correct :
function scrollIntoView(el) {
var offsetTop = $j(el).offset().top;
var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
var scrollTop = offsetTop - adjustment;
$j('html,body').animate({
scrollTop: scrollTop
}, 200);
}
Designon
Updated on July 30, 2022Comments
-
Designon almost 2 years
I would like to center a
div
by clicking it. So if I'm clicking adiv
I want it to scroll to the center of the browser viewport. I don't want to use anchor points like the guides and examples I've seen. How can I achieve this? -
Designon almost 12 yearsinsertusernamehere you're a freaking god! Thanks!
-
Programista almost 11 years@insertusernamehere But this way if the element is bigger than window height it will be fully visible, not centered, but visible from start, this is working like "center this until it won't fit, then just scroll the view to element start"
-
insertusernamehere almost 11 years@Programista Ah, thanks for making that clear. Now I get what was meant by "overshoot". Depending on the use case (really center everything or center if applicable), this is another solution and here's a fiddle to demonstrate it.
-
Can Rau almost 8 yearsgreat thanks..vanillarized it for my needs..workin like a charm =)
-
LStarky about 7 yearsWhat would this be in Vanilla JavaScript?
-
AEB about 3 yearsUnfortunately, it doesn't work in older browsers.
-
escottalexander almost 3 yearsCould you explain why you are using the ">>" (right shift) operator here?