相对于页面上的另一个 div 滚动 div答案

【问题标题】：Scroll div with regard to another div on page相对于页面上的另一个 div 滚动 div
【发布时间】：2014-07-14 07:05:40
【问题描述】：

我有一个 div，当页面滚动到它的高度时，它会固定在页面顶部。这个 div 有一个下拉菜单，作为下面 div 的标签。

当从此下拉列表中选择 div 名称时，该 div 应向上滚动到固定 div 结束的位置。目前，它正在滚动到页面顶部。

你可以在这里看到问题http://jsfiddle.net/eranjali08/b7W95/

function ScrollToElement(element) {
    $('html,body').animate({
        scrollTop: $("#" + element).position().top
    }, 'slow');
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

当添加“fixToTop”类时，元素的高度将从文档中删除。如果滚动在添加之前开始，则滚动在错误的位置结束。

可以通过在添加类时将原始高度添加到元素并在删除类时将其设置回 0 来避免这种情况。

function topContainer_relocate() {
    var window_top = $(window).scrollTop();
    if ($('#topContainer-anchor').offset()) {
        var div_top = $('#topContainer-anchor').offset().top;
        if (window_top > div_top) {
            $('#topContainerSpace').height($('#topContainer').height());
            $('#topContainer').addClass('fixToTop');
        } else {
            $('#topContainer').removeClass('fixToTop');
            $('#topContainerSpace').height(0);
        }
    } else {
        $('#topContainer').removeClass('fixToTop');
        $('#topContainerSpace').height(0);
    }
}

HTML

<div id="topContainerSpace"></div>
<div id="topContainer">

【讨论】：

【解决方案2】：

从顶部位置减去固定的 div 高度，如下所示：

    function ScrollToElement(element) {
        $('html,body').animate({
            scrollTop: $("#" + element).position().top - $('#topContainer').height()
        }, 'slow');
    }

您还可以添加一个小填充：

    function ScrollToElement(element) {
        $('html,body').animate({
            scrollTop: $("#" + element).position().top - $('#topContainer').height() - 5
        }, 'slow');
    }

http://jsfiddle.net/jA4DS/3/

【讨论】：

感谢您的帮助。但我试过这样做，但它不起作用。即使在您的小提琴中，尝试选择 B 并且该部分位于固定 div 下方:(