javascript - javascript单击时平滑滚动

Question

我正在使用这个链接：

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

它同时做两件事：

1. 将用户跳转到页面顶部
2. 执行这个其他（不相关的）ajax 加载功能

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

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

Answer 1

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

设置链接的id：

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

jquery滚动：

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

Answer 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>