在网页导航栏业内跳转时，如何缓慢跳转到选择区域

 <div class="navigation">
            <div><a class="scroll" href="#">首页</a></div>
            <div><a class="scroll" href="#open">商品预览</a></div>
            <div><a class="scroll" href="#case">项目案例</a></div>
            <div><a class="scroll" href="#show">界面展示</a></div>
            <div><a class="scroll" href="#footer">软件下载</a></div>
            <div><a class="scroll" href="#news">最新消息</a></div>
            <div><a class="scroll" href="#footer">联系我们</a></div>
        </div>

引入：

<script src="<?php echo base_url('resource/js/jquery-2.2.3.min.js') ?>"></script>
<script src="<?php echo base_url('resource/js/jquery.waypoints.min.js') ?>"></script>
<script src="<?php echo base_url('resource/js/jquery.countup.js') ?>"></script>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1000);
        });
    });
</script>