滚动到具有位置的弹出 div 内：固定答案

【问题标题】：Scroll to within popup div with position:fixed滚动到具有位置的弹出 div 内：固定
【发布时间】：2014-04-14 16:59:05
【问题描述】：

我有一个 position: fixed 的弹出窗口。因为我想禁用正文滚动，所以我有正文 {overflow-y: hidden}。在弹出窗口中我有很多内容，这就是为什么我有一个 overflow-y:scroll 到弹出窗口和大量滚动。

我想滚动到此弹出窗口中的特定元素（具有位置：固定和大量滚动）。我无法使用弹出窗口将页面滚动到标签:(

HTML 结构是这样的：

<body style="overflow-y: hidden;">
    <div class="popup" style="position: fixed; overflow-y:scroll; ... ">
        ....
        ....

        .... really long content
        <h4>here</h4>
        ....
        ....
    </div>
</body>

这不起作用:(

$('html, body').animate({
    scrollTop: $("h4").offset().top
}, 2000);

这都不是 :(

  $('.popup').animate({
        scrollTop: $("h4").offset().top
    }, 2000);

这都不是 :(

jQuery.fn.scrollTo = function(where, speed) {
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + where
    }, speed == undefined ? 1000 : speed);
    return this;
};
$("#custom_development_popup").scrollTo($("h4").offset().top, 300);

还有其他想法吗？

【问题讨论】：

标签： jquery overflow scrolltop

【解决方案1】：

在我看来，您的问题是您正试图通过 jQuery (javascript) 解决 CSS 问题。

检查这个小提琴，看看你想做什么。

http://jsfiddle.net/w3QZc/1/

基本上我描述了除了 div 和 body 标签之外的 css。你会看到它没有JS。如果这不是您想要做的，请给我们更多背景信息并更好地解释您的问题。

body{
    overflow-y: hidden;
}

.popup{
    background-color: #eee;
    border: 1px solid #000;
    position: fixed; 
    overflow-y:scroll;
    height: 200px;
    width: 400px;
    padding: 20px;
    margin: 30px;
}

【讨论】：