Question

如果单击第一个按钮，我已经定义了名为“slide-1”和“slide-2”的div，其中间跨度称为“option-1”。

我想将我的scrollTop动画中的195和268（见下文）更改为基于“幻灯片”div的高度来计算数字，但是当我尝试时（“＃slide-2”）。height（）例如，它似乎没有用。

这是我到目前为止的CodePen，它完全符合我的要求，但我担心一旦我将它添加到网页，我将不得不再次手动更改scrollTop数字

现在，滚动基于我自己输入的数字

 //first option code

 $("#option-1-button").on("click", function() {
     $(this).closest(".box").find("#option-1").slideToggle();

     $('body').animate({scrollTop: 195}, 1000);

     $("#slide-2").delay(500).fadeToggle(1000);

     $('body').delay(500).animate({scrollTop: 268}, 1000);

     $('#option-1-button').prop('disabled', true);
     $('#option-2-button').prop('disabled', true);

 });

Answer 1

我认为您只是错过了$符号：

  $('body').animate({ //animate element that has scroll
        scrollTop: $("#slide-1").height() //for scrolling
    }, 1000);

    $("#slide-2").delay(500).fadeToggle(1000);

    $('body').delay(500).animate({ //animate element that has scroll
        scrollTop: $("#slide-2").height() //for scrolling
    }, 1000);

Answer 2

您可以使用offset（）获取div的位置; 它将为您提供元素的顶部或左侧位置。（文档0,0的顶部或左侧的像素）然后滚动到该值。

e.g。 $（＆＃39;＃滑动-1＆＃39）。偏移（）顶部;

Answer 3

您需要注意一些事项 -

重复ID个值。您有id="windows"的2个元素。将这些更改为课程，否则您的身高将会关闭。
因为您现在有多个windows元素，它们可能都有不同的高度，因此您需要依赖索引值来确定您将获得的windows高度。
你需要获得3种不同的东西 -
- option框到窗口顶部的高度
- option框本身的高度，包括边距
- windows元素的高度，包括边距

var window = $('.windows')[0]  //0 is the index of the first occurrence of the class windows

var scrollHeight = $('#option1').offset().top + $('#option1').outerHeight(true) + $(window).outerHeight(true);

我使用了jQuery方法.outerHeight([includeMargin])并将includeMargin标记设置为true，因此它将包含计算高度时所需的任何边距 - http://api.jquery.com/outerheight/ < / p>

编辑演示 - https://codepen.io/anon/pen/bZKrWQ

计算自动滚动的div高度

3 个答案: