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);