logo标签列表

滚动DIV到特定位置

javascriptjqueryhtmlcss
5

有很多类似的问题，但似乎没有一个跟我想要的一样，否则回答都对我没有用。

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

我在其他网站上看到过这样的操作，所以我知道这是可能的——只是我不知道从哪里开始。

备注：jQuery 方案也可以接受。

他们最初会从列表中选择一个选项吗？如果是这样，您是否想要进行整个页面重新加载以从所选的div中加载信息？您有没有考虑使用无序列表来实现这个功能？ - Adjit
这个有帮助吗？https://dev59.com/qnE95IYBdhLWcg3wXcnd - HJ05
5个回答
5

类似这样的 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（请将以下代码放在 <body> 标签的底部）：

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

demo: http://jsfiddle.net/66tGt/

这个代码可以运行，但是它没有将选中的选项居中。我更新了代码到 http://jsfiddle.net/X2eTL/2/ ，现在它正好做我需要的事情（我将其更改为 selected[0].offsetTop - 45）。谢谢！ - Jason
3

既然您说接受jQuery答案，那么这里有一个符合您要求的示例：

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

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

2
这里提供一种可能适合您的解决方案：
JSFiddle演示代码： 点击查看 JS代码：
$('#container').scrollTop( $('.selected').position().top );
1
请看这个fiddle: 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);
});
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接