jQuery 滚动到页面指定元素位置

HTML

<ul id="commentlist">
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:45</span>
        <p class="comment_content">comment1</p>
    </li>
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:25</span>
        <p class="comment_content">comment2</p>
    </li>
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:02</span>
        <p class="comment_content">comment3</p>
    </li>
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:45</span>
        <p class="comment_content">comment1</p>
    </li>
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:25</span>
        <p class="comment_content">comment2</p>
    </li>
    <li style="text-align: left">
        <img src="" alt="">
        <p class="name">iefreer</p>
        <span class="time">2015-07-17 16:38:02</span>
        <p class="comment_content">comment3</p>
    </li>
</ul>
<button id="scroll">Scroll me</button>

JavaScript

$(document).ready(function() {
    $("#scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#commentlist").offset().top
        }, 1000);
    });
});

CSS

#scroll {
    margin-bottom: 60px;
    padding: 5px 10px;
}