jQuery Scroll to Focused Element

Using jQuery automatically scroll to the selected element (in this case, on a form). Used for dodging overlap of position:fixed elements.

HTML

<div id="stick"></div>
<form>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
    <br/>
    <input type="text" />
</form>

CSS

html, body {
    height: 900px;
}
#stick {
    background: rgba(0, 0, 0, 0.5);
    height: 200px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

JavaScript

$('input').focus(function () {
    $('html, body').animate({
        scrollTop: $(this).offset().top + 'px'
    }, 'fast');
});