難度係數：簡樸

關鍵詞：length outerHeight position

媒介

案例很簡樸，然則關於初學者能夠延長進修下jquery的相干知識點：

1. 推斷挑選的元素是不是存在用length;
2. 獵取元素的高度height()與outerHeight()的異同；
3. 推斷元素位置position()與offset()的異同。

運用場景：

在做動態建立目次的時刻，挑選的條目不在可視地區，如圖：

默許狀況滾動條都是在最上面的，致使超越可視地區的挑選條目沒有呈如今可視地區，因而要劇本處置懲罰下。代碼很簡樸，以下：

設置父容器相對定位

ul{
    postion:relative;
}

動態建立完dom構造后挪用函數

function setSelectedInView(){
    $('.J-item.selected').each(function(){
        var $this = $(this);
        if($this.length > 0){
            var $item = $this.parent(),
                itemHeight = $item.outerHeight(),
                itemTop = $item.position().top;
            var $container = $item.parent('.J-items'),
                containerHeight = $container.height();
            // 假如該條目元素相干於父級的位置超越可視框高度，設置滾動條
            if(itemTop > containerHeight){
                $container.scrollTop(itemTop - containerHeight + itemHeight);
            }
        }
    })
}