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

Question

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

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

我真的不确定如何使用常见的 jquery animate 来处理我的情况：

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

非常感谢任何建议。

Answer 1

试试这个

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;
});

Answer 2

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

$('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>

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

Scroll up to an element from bottom of the page

html

javascript

css

jquery

jquery-animate