如何使用平滑效果的 window.scrollTo() [关闭]

Posted 2023-02-22

【中文标题】如何使用平滑效果的 window.scrollTo() [关闭]

【英文标题】：How to window.scrollTo() with a smooth effect [closed]

【发布时间】：2017-07-04 19:56:20

【问题描述】：

我可以使用以下内容滚动到 200 像素

btn.addEventListener("click", function()
    window.scrollTo(0,200);
)

但我想要一个平滑的滚动效果。我该怎么做？

【问题讨论】：

Smooth scrolling when clicking an anchor link的可能重复

只是给后代的注释（可从 Chrome 61 获得）“CSSOM 视图平滑滚动 API 通过滚动行为：平滑 CSS 属性或使用窗口为平台带来原生平滑滚动。 scrollTo() DOM 滚动方法，无需使用 javascript 实现此行为"

在页面顶部放置一个空元素，然后可以使用 document.querySelector('your-element').scrollIntoView(behavior: 'smooth');

可以使用。 window.scrollTo( top: 200, behavior: 'smooth' );我想添加它作为答案，但问题已关闭。

卫生署！美式英语 - 行为：“流畅”会让你一事无成...

【参考方案1】：

$('html, body').animate(scrollTop:1200,'50');

你可以做到！

【讨论】：

是的，我同意你的观点，但你使用的是 jQuery，而我只想使用 Vanilla。但我同意你的观点，使用 jQuery 更简单

是的，兄弟。那只是jquery，但你可以使用它。 jQuery 非常简单。

是问题所在，jQuery 很简单。而且我不喜欢简单的时候。我更喜欢深入了解纯 JS（Vanilla），然后我可以使用 jQuery。这是我的哲学

不仅如此，jquery 在改变元素高度的同时滚动时会导致一些严重的卡顿（例如在使用scrollTop() 时使用.show() 或.slideDown()）。 jQuery 可以很好地处理快速/琐碎的东西，但它只是真正 js 的一个门面。看看这个！ pawelgrzybek.com/page-scroll-in-vanilla-javascript

1 年后，我认为 scrollTo 已经进化，你的脚本对我来说已被弃用，因为现在，我们可以像这样将对象传递给 scrollTo ：window.scrollTo( top: 0, behavior: 'smooth' ); 我们是相同的效果行代码更少，新旧浏览器都支持:)

【参考方案2】：

2018 年更新

现在您只需使用window.scrollTo( top: 0, behavior: 'smooth' ) 即可获得平滑滚动的页面。

const btn = document.getElementById('elem');

btn.addEventListener('click', () => window.scrollTo(
  top: 400,
  behavior: 'smooth',
));

#x 
  height: 1000px;
  background: lightblue;

<div id='x'>
  <button id='elem'>Click to scroll</button>
</div>

较旧的解决方案

你可以这样做：

var btn = document.getElementById('x');

btn.addEventListener("click", function() 
  var i = 10;
  var int = setInterval(function() 
    window.scrollTo(0, i);
    i += 10;
    if (i >= 200) clearInterval(int);
  , 20);
)

body 
  background: #3a2613;
  height: 600px;

<button id='x'>click</button>

ES6递归方法：

const btn = document.getElementById('elem');

const smoothScroll = (h) => 
  let i = h || 0;
  if (i < 200) 
    setTimeout(() => 
      window.scrollTo(0, i);
      smoothScroll(i + 10);
    , 10);
  


btn.addEventListener('click', () => smoothScroll());

body 
  background: #9a6432;
  height: 600px;

<button id='elem'>click</button>

【讨论】：

对于真正平滑的过渡，您宁愿使用requestAnimationFrame codepen.io/dsheiko/pen/XZEgXW

1 年后，我认为 scrollTo 已经进化，你的脚本对我来说已被弃用，因为现在，我们可以像这样将对象传递给 scrollTo ：window.scrollTo( top: 0, behavior: 'smooth' ); 我们是相同的效果行代码更少，新旧浏览器都支持:)

@KolaCaine 谢谢，我已经更新了我的答案:)

Safari for OSX 在使用window.scrollTo 时似乎忽略了behavior: 'smooth' 参数。

@PetrNagy 是的 behavior: 'smooth' 也无法在 ios 上运行。我认为我们仍然需要在 Mac 和 iOS 上使用旧的 WebKit 解决方案。