Question: I would like to center a `div` by clicking it. So if I'm clicking a `div` 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?

Answer: 
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:

```js
$('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:

```js
$(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:

```html
<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/>
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);
    }

```