javascript单击时平滑滚动答案

【问题标题】：javascript smooth scroll on clickjavascript单击时平滑滚动
【发布时间】：2012-10-22 17:13:58
【问题描述】：

我正在使用这个链接：

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

它同时做两件事：

将用户跳转到页面顶部
执行这个其他（不相关的）ajax 加载函数

一切都很好，除了我试图弄清楚如何让它更顺畅地滚动到顶部。我尝试添加 .scroll 以将其附加到我的 jquery scrollTo 插件，但没有任何反应，这可能与我使用 javascript onclick 的事实有关，而 href 属性则完全不同。

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

【问题讨论】：

标签： javascript scrolltop

【解决方案1】：

试试这个，它会为scrollTop() 函数设置动画。

设置链接的id：

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

jquery 滚动：

$('#link').click(function(e){
  var $target = $('html,body');
  $target.animate({scrollTop: $target.height()}, 500);
});

【讨论】：

'return false' 在这里肯定是错的！请改用“function(e)..”和“e.preventDefault()”。
它是漂亮且超级干净的代码。最重要的是，效果很好！
因为这个问题是在没有 jQuery 标签的情况下被问到的，所以我期待一个普通的 JS 解决方案。

【解决方案2】：

document.querySelector('button').addEventListener('click', function(){
   scrollTo( document.querySelector('aside'), Math.floor(Math.random() * 1000) + 1  , 600 );   
});
    
function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
        
    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

button{ float:left; }
aside{ height:200px; width:50%; border:2px dashed red; overflow:auto; }
aside::before{
  content:''; 
  display:block; 
  height:1000px;  
  background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);
}

<button>click to random scroll</button>
<aside></aside>

【讨论】：