原生js实现淘宝首页点击按钮缓慢回到顶部效果

实现淘宝首页点击按钮缓慢回到顶部效果可以采用原生Javascript，下面是具体的实现步骤：

1. 获取回到顶部按钮以及页面滚动条

首先，在页面中添加“回到顶部”按钮，然后使用JS代码获取该按钮以及页面滚动条的对象：

var scrollBtn = document.getElementById('scrollBtn');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight;

2. 给回到顶部按钮添加点击事件

给回到顶部按钮添加点击事件，点击时页面回到页面最上方：

scrollBtn.onclick = function() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
}

3. 添加平滑滚动效果

为了达到缓慢回到页面顶部的效果，我们需要利用JS实现页面的平滑滚动。这里采用requestAnimationFrame方法来实现。在页面滚动期间，使用window.requestAnimationFrame()方法设置循环函数，来不断修改页面滚动值。具体代码如下：

scrollBtn.onclick = function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;
    var perSpeed = Math.round(scrollTop / 10);
    function step() {
        scrollTop = scrollTop - perSpeed;
        if (scrollTop <= 0) {
            scrollTop = 0;
            window.scrollTo(0, scrollTop);
            return;
        }
        window.scrollTo(0, scrollTop);
        requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
}

示例说明1

在以下代码中，点击按钮时，页面会缓慢回到页面最顶部。具体实现中，为了实现缓慢滚动效果，采用了requestAnimationFrame()方法，通过调整滚动值，不断地调用window.scrollTo()方法来实现平滑滚动效果。这里实现了同时兼容PC端和移动端。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>淘宝首页-点击按钮缓慢回到顶部</title>
  <style>
    #scrollBtn {
      display: none;
      position: fixed;
      bottom: 80px;
      right: 50px;
      width: 44px;
      height: 44px;
      background: #666 url('http://gtms04.alicdn.com/tps/i4/TB16s.NGXXXXXbhaXXXF8YH9XXX-99-122.png') no-repeat center center;
      cursor: pointer;
    }
    #scrollBtn:hover {
      background-color: #f40;
      -webkit-transition: background-color .2s ease-in;
      -moz-transition: background-color .2s ease-in;
      -o-transition: background-color .2s ease-in;
      transition: background-color .2s ease-in;
    }
  </style>
</head>
<body>
  <div style="height:1900px; background-color: #ddd;"></div>
  <div id="scrollBtn"></div>
  <script>
    //获取回到顶部按钮以及页面滚动条
    var scrollBtn = document.getElementById('scrollBtn');
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;

    //给按钮添加点击事件
    scrollBtn.onclick = function(){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var clientHeight = document.documentElement.clientHeight;
      var perSpeed = Math.round(scrollTop / 10);

      //平滑滚动
      function step() {
        scrollTop = scrollTop - perSpeed;
        if (scrollTop <= 0) {
          scrollTop = 0;
          window.scrollTo(0, scrollTop);
          return;
        }
        window.scrollTo(0, scrollTop);
        requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    };

    //onscroll事件，判断按钮的显示与隐藏
    window.onscroll = function () {
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > clientHeight) {
        scrollBtn.style.display = 'block';
      } else {
        scrollBtn.style.display = 'none';
      }
    };
  </script>
</body>
</html>

示例说明2

在以下代码中，点击按钮时，页面会缓慢回到页面最顶部。具体实现中，为了实现缓慢滚动效果，采用了requestAnimationFrame()方法，通过调整滚动值，不断地调用window.scrollTo()方法来实现平滑滚动效果。这里使用了window.onscroll事件，同时兼容了PC端和移动端。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>淘宝首页-点击按钮缓慢回到顶部</title>
  <style>
    #scrollBtn {
      display: none;
      position: fixed;
      bottom: 80px;
      right: 50px;
      width: 44px;
      height: 44px;
      background: #666 url('http://gtms04.alicdn.com/tps/i4/TB16s.NGXXXXXbhaXXXF8YH9XXX-99-122.png') no-repeat center center;
      cursor: pointer;
    }
    #scrollBtn:hover {
      background-color: #f40;
      -webkit-transition: background-color .2s ease-in;
      -moz-transition: background-color .2s ease-in;
      -o-transition: background-color .2s ease-in;
      transition: background-color .2s ease-in;
    }
  </style>
</head>
<body>
  <div style="height:1900px; background-color: #ddd;"></div>
  <div id="scrollBtn"></div>
  <script>
    //获取回到顶部按钮以及页面滚动条
    var scrollBtn = document.getElementById('scrollBtn');
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;

    //给按钮添加点击事件
    scrollBtn.onclick = function(){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var clientHeight = document.documentElement.clientHeight;
      var perSpeed = Math.round(scrollTop / 10);

      //平滑滚动
      function step() {
        scrollTop = scrollTop - perSpeed;
        if (scrollTop <= 0) {
          scrollTop = 0;
          window.scrollTo(0, scrollTop);
          return;
        }
        window.scrollTo(0, scrollTop);
        requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    };

    //onscroll事件，判断按钮的显示与隐藏
    window.onscroll = function () {
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > clientHeight) {
        scrollBtn.style.display = 'block';
      } else {
        scrollBtn.style.display = 'none';
      }
    };
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现淘宝首页点击按钮缓慢回到顶部效果 - Python技术站