javascript在单击时平滑滚动

我正在使用此链接：

<a class="" onclick="location.href='#top'" href="superContent">superContent</a>

它同时做两件事：

将用户跳转到页面顶部

执行另一个（不相关的）ajax加载函数

一切都很好，除了我想弄清楚如何让它更平滑地滚动到顶部。我尝试添加.scroll以将其附加到我的jquery scrollTo插件，但没有发生任何事情，这可能与我使用javascript onclick有关，而href属性则完全执行其他操作

---

有没有办法将动画平滑滚动附加到onclick=“location.href=”#top“？

试试这个，它会为

scrollTop（）函数设置动画

设置链接的id:

<a id="link">link</a>


document.querySelector（'button'）。addEventListener（'click'，function（）{
滚动到（document.querySelector（'aside'）、Math.floor（Math.random（）*1000）+1600）；
});
函数滚动到（元素、到、持续时间）{
var start=element.scrollTop，
改变=开始，
currentTime=0，
增量=20；
var animateScroll=函数（）{
当前时间+=增量；
var val=Math.easeInOutQuad（当前时间、开始、更改、持续时间）；
element.scrollTop=val；
如果（当前时间<持续时间）{
设置超时（动画滚动，增量）；
}
};
动画滚动（）；
}
//t=当前时间
//b=起始值
//c=价值变化
//d=持续时间
Math.easeInOutQuad=函数（t，b，c，d）{
t/=d/2；
如果（t<1）返回c/2*t*t+b；
t--；
返回-c/2*（t*（t-2）-1）+b；
};
按钮{float:left；}
旁边{高度：200px；宽度：50%；边框：2px红色虚线；溢出：自动；}
旁白{
内容：''；
显示：块；
高度：1000px；
背景：线性梯度（#3f87a6，#ebf8e1，#f69d3c）；
}
单击以随机滚动
“返回错误”在这里绝对是错误的！改用“函数（e）…”和“e.preventDefault（）”。这是一段漂亮且超级干净的代码。最重要的是，它工作得很好！因为这个问题是在没有jQuery标记的情况下提出的，所以我期待一个简单的JS解决方案。
$('#link').click(function(e){
  var $target = $('html,body');
  $target.animate({scrollTop: $target.height()}, 500);
});