js 返回页面顶部（动画）

作者: magic_pill | 来源:发表于2018-11-05 17:36 被阅读15次

js 返回页面顶部（动画）
Web JS实现页面返回顶部
JS实现点击返回顶部动画
js基础知识面试题（二）
NProgress.js-页面加载进度条
返回顶部动画
jQuery点击锚点平滑滚动
js 返回页面顶部的实现( layui)
JS返回顶部
js 返回顶部

js 返回到页面顶部，含有渐变或者动画效果

<html>
  <!-- 定义返回顶部的按钮，id 为 “goTop”，默认初始状态隐藏 -->
  <div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
</html>
<script>
  // 获取按钮
  const goTopBtn = document.getElementById('goTop')
  // 初始时，被浏览器卷进去的上部内容高度为 0
  let scrollTop = 0
  // 监听页面滚动事件
  window.onscroll = () => {
    // 获取被浏览器卷进去的上部内容高度
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果被卷进去的内容高度大于 50，显示返回顶部的按钮；
    // 如果被卷进去的内容高度小于 50，隐藏返回顶部的按钮。
    scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')
  }
  goTopBtn.onclick = () => {
    // 清空上一次的定时器
    let timer = null;
    clearInterval(timer);
    // 创建定时器，每 15ms 执行一次箭头函数
    timer = setInterval(()=>{
      // 每次执行函数，scrollTop 减少十分之一
      scrollTop -= scrollTop / 10;
      window.scrollTo(0,scrollTop)
      // 当 scrollTop 小于 2 时，直接使 scrollTop 为 0，并且清空定时器。
      if(scrollTop<2){
        window.scrollTo(0,0);
        clearInterval(timer);
      }
    },15)
  }
</script>

js 返回到页面顶部，直接返回

<html>
  <div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
</html>
<script>
  const goTopBtn = document.getElementById('goTop')
  let scrollTop = 0
  window.onscroll = () => {
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')
  }
  goTopBtn.onclick = () => {
    window.scrollTo(0, 0);
  }
</script>