1<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
2<div class="second" id="second">Hi</div>
3

1$("button").click(function() {
2    $('html,body').animate({
3        scrollTop: $(".second").offset().top},
4        'slow');
5});
6

1window.smoothScroll = function(target) {
2    var scrollContainer = target;
3    do { //find scroll container
4        scrollContainer = scrollContainer.parentNode;
5        if (!scrollContainer) return;
6        scrollContainer.scrollTop += 1;
7    } while (scrollContainer.scrollTop == 0);
8
9    var targetY = 0;
10    do { //find the top of target relatively to the container
11        if (target == scrollContainer) break;
12        targetY += target.offsetTop;
13    } while (target = target.offsetParent);
14
15    scroll = function(c, a, b, i) {
16        i++; if (i > 30) return;
17        c.scrollTop = a + (b - a) / 30 * i;
18        setTimeout(function(){ scroll(c, a, b, i); }, 20);
19    }
20    // start scrolling
21    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
22}
23

1.first {
2    width: 100%;
3    height: 1000px;
4    background: #ccc;
5}
6
7.second {
8    width: 100%;
9    height: 1000px;
10    background: #999;
11}
12