html元素滾動定位方法

最近做的專案中有一個需要定位到選中列表位置，使所選內容始終顯示在列表顯示範圍內的需求，類似於這種：

趁此機會整理了幾種常用的滾動定位的方法，希望對大家有所幫助。

scrollIntoView()方法

語法：element.scrollIntoView(); // 等同於element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型引數
element.scrollIntoView(scrollIntoViewOptions); // Object型引數

      *alignToTop: 一個Boolean值，
      			如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個引數的預設值。
      			如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
      *scrollIntoViewOptions ：一個物件，有behavior，block ，inline 幾個屬性。
                behavior定義動畫過渡效果， "auto"或 "smooth" 之一。預設為 "auto"。
                block定義垂直方向的對齊， "start", "center", "end", 或 "nearest"之一。預設為 "start"。
                inline定義水平方向的對齊， "start", "center", "end", 或 "nearest"之一。預設為 "nearest"。
     例如：

//jquery
$("#main")[0].scrollIntoView();
//js
 document.querySelector("#main").scrollIntoView();

scrollTop()

scrollTop()方法設定或返回被選元素的垂直滾動條位置。當滾動條位於最頂部時，位置是 0。

當用於返回位置時：
該方法返回第一個匹配元素的滾動條的垂直位置。例：$(selector).scrollTop()

當用於設定位置時：
該方法設定所有匹配元素的滾動條的垂直位置。例：$(selector).scrollTop(position)

<div id="scroll">
    ...
    <div id="target">...</div>
    ...
</div>

var container = $("#scroll");
var scrollTo = $("#target");
var num = scrollTo.offset().top - container.offset().top + container.scrollTop();

container.animate({ scrollTop: num },2000);