javascript - 平滑滚动问题

Question

希望并排的两个 div 具有 100% 的高度。我想让每个 div 独立于滚动内容，但在蓝色的 div/列中，我希望有一个平滑的滚动功能。它现在可以工作，但您会看到红色列没有保留其 100% 的列高。

感谢您的任何见解...

$(document).ready(function (){
        $('a').click(function (){
            $('html, body').animate({
                scrollTop: $("#sectionb").offset().top
            }, 2000);
        });
    });



<div id="adiv" style="height: 100%; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: relative; background: blue; overflow: auto">
<a href="#sectionb">Click Me</a>
<section>
 Section A
</section>

<section>
  <div id="sectionb">
    Section B
  </div>
</section>
</div>

jsFiddle

Answer 1

$(document).ready(function (){
            $('a').click(function (event) {
            event.preventDefault();
            $('#bdiv').animate({
                "margin-top": "-" + $("#sectionb").offset().top
                }, 2000);
            });
});
$(document.body).css({"overflow": "hidden"}); // No scrollbar

body, html {height: 100%; padding: 0; margin: 0;}

a {color: #FFF}
section {height: 700px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adiv" style="height: inherit; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: absolute; left: 30%; background: blue; overflow-y: scroll; width: 70%;">
  <section id="sectiona">
     <a href="#sectionb">Section B</a>
     <br>
     Section A
  </section>
  <section id="sectionb">
    <a href="#sectiona">Section A</a>
    <br>
    Section B
  </section>
</div>

100% 表示当前屏幕高度/宽度的 100%，因此它会拉伸(stretch)到当前屏幕的高度，但这里有一个解决方案可以使红色区域与蓝色区域的高度完全相同。