滚动到顶部动画

Question

我创建了一个按钮，当有人向下滚动时会显示该按钮。当您单击该按钮时，您将滚动到页面顶部。但是我正在尝试使这种效果生动起来。我拥有的代码有可能吗？

这是原始代码

export const SAMPLE_ROUTES: Routes = [
  {
    path: 'samples',
    component: SampleListComponent,
    children: [
      {
        path: ':id',
        component: SampleDetailsComponent,
        children: [
          {
            path: 'depth3',
            component: SampleDepth3Component,
            children: [
              {
                path: 'depth4',
                component: SampleDepth4Component,
                children: [
                  {
                    path: 'depth5',
                    component: SampleDepth5Component,
                  }
                ]
              }
            ]
          }
        ]
      }

    ]
  }
];

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("top").style.opacity = 1;
  } else {
    document.getElementById("top").style.opacity = 0;
  }
}

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

#top {
  width: 50px;
  height: 38px;
  display: block;
  opacity: 0;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  background: url(../images/top.png) no-repeat center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

要使其具有动画效果，我尝试过使用此JS，但不起作用：（

<button onclick="topFunction()" id="top" title="Go to top">Go to top</button>

知道我在做什么错

非常感谢。