1. 程式人生 > >點選導航,滑動到網頁中的指定位置(JS實現滑動錨點定位)

點選導航,滑動到網頁中的指定位置(JS實現滑動錨點定位)

在一個網頁頁面中,可能會分為很多的模組內容,當我點選導航欄的某一項時,希望顯示對應的內容,例如,點選下圖導航中的報告服務後,希望網頁滑動到 “報告服務” 的模組,點選城市品牌滑動到“城市品牌”的模組。


城市品牌模組


js程式碼

<script>
    $(function () {
        //獲取城市模組到頂部的距離 
        var city_top = $('#city_top').offset().top;
        $('.city_li').click(function () {
            $('html,body').animate({scrollTop:city_top},500);
        })
    })
</script>