Question

周围有许多类似的问题，但似乎没有人在寻找我正在寻找的东西，否则没有一个答案对我的目的有用。

jsfiddle：http://jsfiddle.net/tumblingpenguin/9yGCf/4/

用户将选择一个选项，页面将在应用其选项时重新加载。我需要的是将“选项列表”DIV向下滚动到所选选项，使其位于选项列表的中心。

HTML ...

<div id="container">
    <a href="#">
        <div class="option">
            Option 1
        </div>
    </a>
    <!-- other options -->
    <a href="#">
        <div class="option selected"> <!-- scroll to here -->
            Option 4
        </div>
    <!-- other options -->
    <a href="#">
        <div class="option">
            Option 7
        </div>
    </a>
</div>

所选选项标有selected类。我需要以某种方式将DIV向下滚动到selected选项。

CSS ......

#container {
    background-color: #F00;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
}
a {
    color: #FFF;
    text-decoration: none;
}
.option {
    background-color: #c0c0c0;
    padding: 5px;
    width: 200px;
}
.option:hover {
    background-color: #ccc;
}
.selected {
    background-color: #3c6;
}

我已经在其他网站上看到了这一点，所以我知道这是可能的 - 我只是不知道从哪里开始。

P.S。 jQuery解决方案是可以接受的。

Answer 1

既然你说JQuery的答案是可以接受的，这里有一个你要找的例子：

$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);

将div替换为您要滚动到的任何元素。

Answer 2

像这样http://jsfiddle.net/X2eTL/1/：

// On document ready
$(function(){
    // Find selected div
    var selected = $('#container .selected');
    // Scroll container to offset of the selected div
    selected.parent().parent().scrollTop(selected[0].offsetTop);
});

没有jQuery（把它放在＆lt; body＆gt;标记的底部：

// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;

演示：http://jsfiddle.net/66tGt/

Answer 3

以下是一个可能适合您的解决方案：

<强> Demo Fiddle

JS：

$('#container').scrollTop( $('.selected').position().top );

Answer 4

看看这个小提琴：http://jsfiddle.net/9yGCf/8/

根据要求，它会滚动到div的中间位置（您可以根据需要进行少量调整来更改偏移量）。我可能会建议使用一些填充和诸如此类的东西设置行高，然后进行数学计算以更改我在-40处的偏移量，以便它将它放在中间。

但我使用了jquery并想出了这个快速的小代码...还添加了一些代码来更改所选的选项

$('.option').click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});

Answer 5

这个神奇的 API 会自动滚动到正确的位置。

element.scrollIntoView({ block: 'center' })

查看更多详情：

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

将DIV滚动到特定位置

5 个答案: