scroll element into view

by Adam Granger

HTML

<div class="scroller">
    <div class="pane">
        <p>one</p>
        <p>two</p>
        <p>three</p>
        <input type="text" class="foo" value="foo" />
        <p>four</p>
        <p>five</p>
        <input type="text" class="bar" value="bar" />
        <p>six</p>
        <p>seven</p>
    </div>
</div>    
     
 <button class="foo">foo</button>
 <button class="bar">bar</button>

CSS

.scroller {
  height: 100px;
  width: 200px;
  border: 1px solid red;
  overflow: hidden;
}
.pane {
   position: relative;
   overflow: hidden;
}

JavaScript

var moveTo = function(target) {
    var offset = -(target.position().top - 
                   $(".scroller").height() / 2 +
                   target.height() / 2);
    $(".pane").css("top", offset + "px");
};

$("button.foo").click(moveTo.bind(null, $("input.foo")));
$("button.bar").click(moveTo.bind(null, $("input.bar")));