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>