Scrolling Divs

It doesn't work at all on android 2 and iOS4. In Android 4 javascript scrollTo does not work

by Ryan Brackett

HTML

<div id="container">
    <div id="topbar" class="slide"><a id="menu-button">Scroll!</a>Scroll button does not work on android4, though interestingly it works on Android 2 even though finger scrolling does not work</div>
    <div id="wrapper" class="slide">
  <ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
   ...

CSS

#container{
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
}

#wrapper{   
    padding:5px;
    width:100%;
    height:300px;
    overflow-y:scroll;
}

#menu-button{
    float:left;
    line-height:20px;
    margin:10px;
    padding:10px;
    background:#555;
    color:white;
}

#topbar{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    background:#ddd;
    text-align:center;
    z-index:1; /*for some reason we need a z index now*/
}

#menu{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:white;
}

</style>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>

JavaScript

$(function() {
  $('#menu-button').click(function() {
    $('#wrapper')[0].scrollTop = 1600;
  });
});