javascript - 从页面底部向上滚动到一个元素

Question

我想滚动到距页面底部约 300 像素的按钮。

因此，无论何时按下按钮，主体都应向上或向下滚动，以便按钮始终位于屏幕底部。

我真的不确定如何为我的案例使用常见的 jquery animate:

 $(".hamburger").click( function(event) {     
     $('html, body').animate({
                    scrollTop: $(document).height() - x //need help here
                }, 400);
      });
   });

非常感谢任何建议。

Answer 1

找到按钮的底部位置(顶部位置 + 按钮高度)并从中减去视口(viewport)高度以确定滚动点。

$('button').on('click',function() {
  var bt = $(this).offset().top,
      bh = $(this).outerHeight(),
      bb = bt + bh,
      vh = $(window).height(),
      sp = bb - vh;
  $('html, body').animate({
    scrollTop: sp
  }, 400);
});

*{margin:0;}
section {
  height: 200vh;
}
footer {
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
</section>
<footer>
  <button>asdf</button>
</footer>