jQuery滚动到可滚动div中的元素

简介

有时候我们需要滚动到一个可滚动的div中的某个元素，就像滚动到网页中的一个锚点。使用jQuery可以很轻松地实现这个功能。

准备工作

首先，我们需要一个可滚动的div，在这个div里面放置一些元素。代码如下：

<div class="scrollable">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
    <div class="item">item 10</div>
</div>

CSS如下：

.scrollable {
    height: 200px;
    overflow: auto;
}
.item {
    height: 50px;
    background-color: #eee;
    margin-bottom: 10px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
}

滚动到元素

有了可滚动的div和一些元素后，我们现在要实现滚动到指定元素的功能。首先，我们需要给每个元素一个唯一的id：

<div class="scrollable">
    <div id="item1" class="item">item 1</div>
    <div id="item2" class="item">item 2</div>
    <div id="item3" class="item">item 3</div>
    <div id="item4" class="item">item 4</div>
    <div id="item5" class="item">item 5</div>
    <div id="item6" class="item">item 6</div>
    <div id="item7" class="item">item 7</div>
    <div id="item8" class="item">item 8</div>
    <div id="item9" class="item">item 9</div>
    <div id="item10" class="item">item 10</div>
</div>

现在我们可以使用jQuery的animate()函数来实现滚动到指定位置的效果。代码如下：

var top = $('#item5').offset().top;
$('.scrollable').animate({
    scrollTop: (top - $('.scrollable').offset().top + $('.scrollable').scrollTop())
}, 1000);

我们首先使用offset()函数获取元素的位置，然后使用animate()函数将scrollTop属性设置为该位置，同时带有动画效果。需要注意的是，我们还需要减去scrollable元素的offset().top以保证滚动位置的准确性。

代码片段如下：

```html
<div class="scrollable">
    <div id="item1" class="item">item 1</div>
    <div id="item2" class="item">item 2</div>
    <div id="item3" class="item">item 3</div>
    <div id="item4" class="item">item 4</div>
    <div id="item5" class="item">item 5</div>
    <div id="item6" class="item">item 6</div>
    <div id="item7" class="item">item 7</div>
    <div id="item8" class="item">item 8</div>
    <div id="item9" class="item">item 9</div>
    <div id="item10" class="item">item 10</div>
</div>

.scrollable {
    height: 200px;
    overflow: auto;
}
.item {
    height: 50px;
    background-color: #eee;
    margin-bottom: 10px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
}

var top = $('#item5').offset().top;
$('.scrollable').animate({
    scrollTop: (top - $('.scrollable').offset().top + $('.scrollable').scrollTop())
}, 1000);