H5页面实现留言流畅滚动

最近一直在做H5小页面，在网上看的一些留言滚动，内容滚完后都会动一下，然后再重新滚动，借鉴下了别人写的代码，然后自己再改动了下，就滚动的很流畅了，不过现在应该很少人使用Jquery了吧

** html **

      <section class="comment-content">
          <h2 class="comment-title"></h2>
          <div class="comment-box">
            <div class="content" id="comment-lists1">
                <div class="list clearfix">
                    <div class="comment">
                        <img src="" alt="" class="head-portrait">
                        <div class="right-content">
                            <h3 class="user-name">海绵宝宝1</h3>
                            <p class="message">还是复合吧</p>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="content" id="comment-lists2" style="padding: 0 .47rem 0 .75rem"></div>
        </div>

          <div class="input-box">
              <input type="text" placeholder="发布你的留言">
              <button class="send-out">发送</button>
          </div>
      </section>

** CSS **

.comment-content,.visit-number {
    width: 98%;
    padding-bottom: .45rem;
    background-color: #aae374 !important;
    border: .08rem solid #fff;
    box-shadow: 0.12rem 0.12rem 0.38rem 0rem #7dc464;
    border-radius: .48rem;
    -webkit-border-radius: .48rem;
    -moz-border-radius: .48rem;
    -ms-border-radius: .48rem;
    -o-border-radius: .48rem;
     position: relative;
     
}
.comment-content {
    height: auto;
    background: url(../images/comment_bn.png) no-repeat center top;
    background-size: 100%;
}
.visit-number {
    background: url(../images/visit_bn.png) no-repeat center;
    background-size: 100%;
}

.comment-title {
    position: absolute;
    top: -1.9rem;
    left: 0;
    width: 99%;
    height: 3.25rem;
    background-image: url(../images/comment-title.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.comment-box {
    height: 8.95rem;  overflow: hidden;
}

.comment-content .content {
    padding: 1.35rem .47rem 0 .75rem;
}

.comment-content .content .list .comment {
    max-width: 7.34rem;
    padding: .2rem .28rem;
    background-color: #95d45a;
    display: inline-block;
    color: #fff;
    border-radius: .42rem;
    -webkit-border-radius: .42rem;
    -moz-border-radius: .42rem;
    -ms-border-radius: .42rem;
    -o-border-radius: .42rem;
    margin-bottom: .25rem;
}

.comment-content .content .list .head-portrait {
    float: left;
    width: .6rem;
    height: .6rem;
    background-color: red;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.comment-content .content .list .right-content {
    float: left;
    padding-left: .25rem;
    max-width: 5.95rem;  
}
.comment-content .user-name {
    font-size: .28rem;
}
.comment-content .message {
    font-size: .38rem;
}

** JS **

    (function($){
        $.fn.myScroll = function(options){
        //默认配置
        var defaults = {
            speed:30,  //滚动速度,值越大速度越慢
            // rowHeight:80//每行的高度
        };

        var opts = $.extend({}, defaults, options),intId = [];
        function marquee(obj, step){
            obj.find("#comment-lists1").animate({
                marginTop: '-=1'
            },0,function(){
                    var s = Math.abs(parseInt($(this).css("margin-top")));
                    if(s >= $(this).find(".list").slice(0, 1).height()){  
                        $(this).find(".list").slice(0, 1).appendTo($(this));
                        $(this).css("margin-top", 0);
                    }
                });
            }
            this.each(function(i){
                var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
                intId[i] = setInterval(function(){
                    if(_this.find("#comment-lists1").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        }
        })(jQuery);

        $(function(){
            $("div.comment-box").myScroll({
                speed:30
            });
        });