JS滚动到底部精确 - Javascript

在很多web应用中，需要通过JS自动滚动到页面底部，这在聊天室、社交应用中尤为常见。简单的JS代码虽然能够完成这个任务，但是无法实现滚动到页面底部的精确控制，造成不必要的麻烦。本文就来介绍一些方法，让你准确地、平滑地滚动到页面底部。

1. 使用scrollTop属性

scrollTop属性可以控制元素的垂直滚动位置。文档的根元素是document.documentElement，而body元素是document.body。因此，我们可以使用以下代码：

function scrollToBottom() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  window.scrollTo(0, scrollHeight - clientHeight);
}

该函数通过计算页面的可见区域高度和文档总高度，然后通过计算差值来滚动到页面底部。虽然该方法很简单，但是无法实现滚动到页面底部的平滑控制。

2. 使用requestAnimationFrame函数

requestAnimationFrame函数可以协调页面渲染和 JavaScript动画，使动画效果更加平滑，流畅。以下是一个使用requestAnimationFrame函数的滚动到底部的实现代码：

function scrollToBottom() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  var requestId;
  
  function animate() {
    var distance = scrollTop + clientHeight - scrollHeight;
    scrollTop = scrollTop - distance/8;
    window.scrollTo(0, Math.max(scrollTop, scrollHeight - clientHeight));
    if (scrollTop <= scrollHeight - clientHeight) {
      requestId = window.requestAnimationFrame(animate);
    }
  }
  
  requestId = window.requestAnimationFrame(animate);
  
  function stopAnimate() {
    if (requestId) {
      window.cancelAnimationFrame(requestId);
    }
  }
  
  window.addEventListener('wheel', stopAnimate, {passive: true, capture: false});
  window.addEventListener('touchstart', stopAnimate, {passive: true, capture: false});        
}

animate()函数被递归调用，通过改变scrollTop的值，使得滚动位置不断向下移动，直到scrollTop为负值时停止滚动。如果页面在滚动的过程中，用户使用鼠标或者触屏触碰页面，那么动画就会停止。

3. 使用jQuery插件

jQuery是一款优秀的JavaScript库，有许多强大的插件可以使用。以下是使用jQuery的滚动到底部功能的实现代码：

function scrollToBottom() {
  var $body = $('html, body');
  var $container = $('.container');
  $body.stop().animate({scrollTop: $container.height() - $(window).height()}, '500', 'swing');
}

该函数的工作原理是计算文档高度和可见区域高度的差值，然后通过animate函数，控制页面滚动到差值的位置。该方法更加简单，且有更好的可控性。

以上就是三种滚动到底部的实现方法，你可以根据自己的需求进行选择。