Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='nav'>
    <ul>
        <li><a id='link1' href='#'>test 1</a>
        </li>
        <li><a id='link2' href='#'>test 2</a>
        </li>
        <li><a id='link3' href='#'>test 3</a>
        </li>
    </ul>
</div>
​
<div id='items'>
    <div id='link1-test' class='box'>test 1</div>
    <div id='link2-test' class='box'>test 2</div>
    <div id='link3-test' class='box'>test 3</div>
</div>
</body>
</html>
 
body {
    margin:0 auto;
    width:600px;
}
ul li {
    display:inline-block
}
#nav {
    width:100px;
    float:left;
}
#items {
    float:right;
    height:500px;
    overflow:auto;
}
.box {
    background-color:red;
    height:500px;
    width:500px;
    margin:5px 0;
}
​
#link1-test {
   height: 700px;
}
​
#link2-test {
   height: 1000px;
}
​
#link3-test {
   height: 700px;
}
 
function getOffset( el ) {
  console.log(el);
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
 
​
$('#nav a').on('click', function () {
    $('#items').animate({
      scrollTop: getOffset($('#' + this.id + '-test').get()[0]).top
    }, 700);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers