如何在网页实现滚动平滑效果

一、CSS属性scroll-behavior

在CSS3中，新增了一个scroll-behavior属性，可以让网页滚动时实现平滑滚动效果，而不是过度的跳动。这个属性有以下的取值：

  html{
      scroll-behavior: smooth;
  }

通过在html标签下指定scroll-behavior属性为smooth，即可实现整个页面的平滑滚动效果。注意这个属性只适用于webkit浏览器。

二、使用jQuery插件

jQuery是一个非常流行的JavaScript库，有很多优秀的插件可供使用。其中就有一些能够帮助我们实现滚动平滑效果的插件，例如：Smooth Scroll、jQuery Scroller、jQuery Nice Scroll等。以Smooth Scroll为例，它的使用方法如下：

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/2.2.0/jquery.smooth-scroll.min.js"></script>
  <script>
      $(document).ready(function(){
          $('a[href^="#"]').smoothScroll({
              speed: 1000
          });
      });
  </script>

在首先引入jQuery库和Smooth Scroll插件之后，我们可以通过给要添加滚动平滑效果的锚链接添加一个特殊的选择器“^=”，让它只选取具有特定href属性值的锚链接，然后在jQuery代码中使用smoothScroll()方法，实现平滑滚动效果。在这个方法中我们可以设定滚动的速度、缓冲比例、回调函数等等。

三、使用原生JavaScript实现

除了使用jQuery插件之外，我们也可以使用原生的JavaScript代码来实现平滑滚动效果。下面是一个实现的示例：

  <script>
      function smoothScroll(target, duration){
          var target = document.querySelector(target);
          var targetPosition = target.getBoundingClientRect().top;
          var startPosition = window.pageYOffset;
          var distance = targetPosition - startPosition;
          var startTime = null;

          function animation(currentTime){
              if(startTime === null) startTime = currentTime;
              var timeElapsed = currentTime - startTime;
              var run = ease(timeElapsed, startPosition, distance, duration);
              window.scrollTo(0, run);
              if(timeElapsed < duration) requestAnimationFrame(animation);
          }

          function ease(t, b, c, d){
              t /= d / 2 ;
              if(t < 1) return c / 2 * t * t + b;
              t--;
              return -c / 2 * (t * (t - 2) - 1) + b;
          }

          requestAnimationFrame(animation);
      }

      var home = document.querySelector('.home');
      var contact = document.querySelector('.contact');

      home.addEventListener('click', function(){
          smoothScroll('.banner', 1000);
      });

      contact.addEventListener('click', function(){
          smoothScroll('.footer', 1000);
      });
  </script>

在这里我们首先定义了一个名为smoothScroll()的函数，并将它暴露出去。这个函数接收两个参数：target和duration，分别表示要滚动到的目标元素和滚动的时间。在函数中我们使用getBoundingClientRect()方法得到元素的位置，然后计算出需要滚动的距离和时间。接着我们定义一个运动函数animation()，用来计算运动过程中的各个状态（时间、位置、速度等）以及界面的刷新。在这个函数中，我们使用了ease()函数来制作缓动运动效果，将计算得到的目标位置赋值给window.scrollTo()方法即可实现平滑滚动。最后，我们通过监听元素的点击事件，并调用smoothScroll()函数，来实现网页平滑滚动效果。