求助一个点击向上滑动的问题

Question

<div id="introduce_nav">
    <ul>
        <li class="active hotel_introduce_click">酒店介绍</li>
        <li class="policy_click">退订政策</li>
        <li class="house_introduce_click">房型介绍</li>
        <li class="facilities_click">配套设施</li>
        <li class="payment_click">支付方式</li>
    </ul>
</div>
<div id="introduce_content">
<div class="content">
<div class="hotel_introduce_box">酒店介绍的内容</div>
<div class="policy_box">退订政策的内容</div>
<div class="house_introduce_box">房型介绍的内容</div>
<div class="facilities_box">配套设施的内容</div>
<div class="payment_box">支付方式的内容</div>
</div>
</div>点击导航的LI，对应的内容就向上滑动到顶部，导航点击顺序是不定的，我原来想法是：比如我先点了房型介绍，计算房型介绍box到导航之间的距离作为content的top值滑动（top值是负的），我再点配套设施，计算配套设施box到导航之间的距离+之前已经滑动的值（top值是负的），再点退订政策，计算房型介绍box到导航之间的距离作为content的top值滑动（top值是正的），但实际写的时候就计算乱了，正负值处理不好

Answer 1

需要用到动画     
function handelGo(btn, target) {
        $(document).on('click', btn, function(e) {
            var position = $(target).offset().top;
            $('html, body').animate({ scrollTop: position }, 1000); 
        })
    }   handelGo('.btn-home', '#home');   // #home 锚点位置