向上滚动到页面底部的元素

Question

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

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

我真的不确定如何在我的案例中使用常见的jquery animate：

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

非常感谢任何建议。

Answer 1

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

＆＃13;

＆＃13;

$('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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

HTML：

<div class="container"></div>

<a href="#" class="back">Back to top</a>

</div>

CSS：

.container {
  background: cyan;
  height: 800px;
}

JS：

$('a.back').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});