2021.03-23点击按钮回到顶部动画

最新推荐文章于 2024-08-05 10:49:53 发布

原创最新推荐文章于 2024-08-05 10:49:53 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #reactjs

基础专栏收录该内容

14 篇文章

订阅专栏

这篇博客分享了两种JavaScript实现网页返回顶部的动画效果。第一种是匀速滚动，通过设置定时器逐步减小滚动距离直至回到顶部；第二种则是固定时间回到顶部，以恒定速度递减 scrollTop 值，当滚动到顶部时清除定时器。这两种方法都可以为用户体验增加平滑感。

第一种匀速回到顶部动画

直接粘贴复制就行了，自己加个点击事件。

function toTop() {
    let scrollTo = document.documentElement.scrollTop || document.body.scrollTop
    if ( timer === -1 ){
          timer = setInterval(() => {
            scrollTo -= 50
          if( scrollTo <= 0 ) {
             scrollTo = 0
             window.clearInterval(timer)
            timer = -1
            console.log(scrollTo);

          }
          window.scrollTo(0,scrollTo)
          }, 10);
      }
  }

第二种固定时间回到顶部

 const toTop = () => {
    let scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const timer = setInterval(() => {
      scrollTop -= 40;
      window.scrollTo(0, scrollTop);
      if (scrollTop <= 0) {
        clearInterval(timer);
      }
    }, 16.7);
  };