JS實現信息滾動效果

最開始以爲這個效果並不難實現，利用scrollTop和計時器就能夠了，可是寫完代碼後卻始終不能實現內容的滾動效果，反覆檢查JS代碼，都沒問題。休息了一下子，從新開始理清思路，從HTML代碼開始，一步一步檢查，猛然發現，是CSS樣式編寫有錯誤，代碼以下：

<div class="notice">
        <div class="notice_title">通知公告</div>
        <div class="notice_list" id="notice_list_content">
            <ul>
                <li>    
                    <a href="#">西南交通大學面向海內外公開招聘部分管理崗位的公告(2016年第4號)</a>
                    <span class="date">2016-09-27</span>
                </li>
                <li><a href="#">關於沱江河中止放水及犀浦校區人工湖水位相關狀況的通報</a><span class="date">2016-09-27</span></li>
                <li><a href="#">關於組織2016年國慶「老年健身走「活動的通知</a><span class="date">2016-09-27</span></li>
                <li><a href="#">關於舉行「交通領域發展示狀及幹部成長」公開課的通知</a><span class="date">2016-09-27</span></li>
            </ul>

        </div><!-- notice_title結束 -->
    </div><!-- notice結束 -->

應該設置id="notice_list_content"的div寬度和高度，而不是class="notice"的div寬度和高度，調整以後，信息滾動效果成功實現。
完整代碼以下：

<!--CSS代碼-->
<style type="text/css">
    a {
        text-decoration: none;
    }
    .notice {
        width: 840px;
        margin: 0 auto;
        margin-top: 10px;
        height: 45px;
    }
    .notice_title {
        color: #fff;
        font-family: "微軟雅黑";
        font-size: 16px;
        margin-top: 10px;
        padding: 5px 8px 5px 20px;
        text-align: center;
        background-color:#025483; 
        width: 120px;
        float: left;
    }
    .notice_list {
        width: 680px;
        float: right;
        height: 33px;
        overflow: hidden;    
    }
    .notice_list li{
        list-style-type: none;
        height: 33px;
    }
    .notice_list a:link,.notice_list a:visited{
        color: #333;
        font-size: 16px; 
    }
    .notice_list a:hover,.notice_list a:active{
        color: #025483;
        font-weight: bold;
    }
    .date {
        color: #888;
        font-size: 14px;
        float: right;
    }
</style>
<!--HTML代碼-->
<div class="notice">
        <div class="notice_title">通知公告</div>
        <div class="notice_list" id="notice_list_content">
            <ul>
                <li>    
                    <a href="#">西南交通大學面向海內外公開招聘部分管理崗位的公告(2016年第4號)</a>
                    <span class="date">2016-09-27</span>
                </li>
                <li><a href="#">關於沱江河中止放水及犀浦校區人工湖水位相關狀況的通報</a><span class="date">2016-09-27</span></li>
                <li><a href="#">關於組織2016年國慶「老年健身走「活動的通知</a><span class="date">2016-09-27</span></li>
                <li><a href="#">關於舉行「交通領域發展示狀及幹部成長」公開課的通知</a><span class="date">2016-09-27</span></li>
            </ul>
            
        </div><!-- notice_title結束 -->
    </div>
<!--JS代碼-->
<script type="text/javascript">
    var area = document.getElementById('notice_list_content');
    area.innerHTML += area.innerHTML;
    area.scrollTop = 0;
    var timer;
    function startMove(){
        timer = setInterval(scrollUp,50);
        area.scrollTop++;        
    }
    function scrollUp()
    {
        if(area.scrollTop%33 === 0)
        {
            clearInterval(timer);
            setTimeout(startMove,1000);
        }
        else
        {
            area.scrollTop++;
            if(area.scrollTop >= area.scrollHeight/2)
            {
                area.scrollTop = 0;
            }
        }
    }
    setTimeout(startMove,1000);
    </script>