javascript 滚动_用5行JavaScript平滑页面滚动

javascript 滚动

HTML has always had the ability to jump to locations on a page, provided the target element has an id attribute, via a technique known as anchor links.

只要目标元素具有id属性， HTML便可以通过锚链接跳转到页面上的位置。

However, this movement is instantaneous. For the sake of appearance, a site's design sometimes calls for a smooth or slowed scroll to a point on a page.

但是，该运动是瞬时的。 为了外观起见，网站的设计有时需要平滑或缓慢地滚动到页面上的某个点 。

Historically, this was achieved with JQuery, but it's overkill to load a framework just for one technique. Modern JavaScript provides a more efficient, native alternative, in the form of the window.scrollTo method.

从历史上看，这是通过JQuery实现的，但是仅为一种技术加载框架是过大的。 现代JavaScript以window.scrollTo方法的形式提供了一种更有效的本机替代方法。

A standard anchor link is used as the basis of the technique: that way, if the new smooth scroll code doesn’t work for any reason, the page will still go to the targeted location.

标准的锚链接用作该技术的基础：这样，如果新的平滑滚动代码由于任何原因无法使用，则页面仍将转到目标位置。

<a href="#destination">Click me: I’m <em>smoooooth</em>.</a>
…
 <p id="destination">This is the target, further down the page.

Obviously, the page needs to extend past the bottom of the viewport window for this technique to work: if the browser already displays all the page content, no scroll will take place. For that reason, you must ensure that sure that the page has plenty of content (or filler text).

显然，页面需要扩展到视口窗口的底部才能使该技术起作用：如果浏览器已经显示了所有页面内容，则不会发生滚动。 因此，您必须确保页面上有足够的内容(或填充文本 )。

滚动的两面 (Two Sides of Scrolling)

Somewhat confusingly, the Smooth Scrolling API is implemented in two ways: once as a CSS property, and again in JavaScript. Adding to this confusion is the fact that some browsers support the API, while others do not.

令人困惑的是，平滑滚动API的实现方式有两种：一种是CSS属性，另一种是JavaScript。 有些浏览器支持该API，而另一些浏览器不支持，这一事实加剧了这种混乱。

For the CSS method, the element that will be smooth-scrolled (frequently, but not exclusively, the body) needs to have a scroll-behavior of smooth applied in CSS:

对于CSS方法，要平滑滚动的元素(通常(但非排他性地，是body ))需要在CSS中应用smooth的scroll-behavior ：

body {
	scroll-behavior: smooth;
}

UK English coders, note the spelling of scroll-behavior: no “u"!

英国英语编码人员，请注意scroll-behavior的拼写：否“ u”！

This is enough to make the effect work in the current version of Firefox, but browsers like Chrome need more work, as of this writing.

这足以使效果在当前版本的Firefox中起作用，但是在撰写本文时，像Chrome这样的浏览器需要更多的工作。

JavaScript方面 (The JavaScript Side)

Browsers that do not support the scroll-behavior CSS property will need to use the JavaScript API, and most of those will need a polyfill: I would recommend Dustan Kasten’s smoothscroll, although there are many other possibilities.

不支持scroll-behavior CSS属性的浏览器将需要使用JavaScript API，并且大多数浏览器将需要polyfill ：我建议Dustan Kasten的smoothscroll ，尽管还有很多其他可能性。

Let’s imagine that we have a <nav> section with links:

假设我们有一个带有链接的<nav>部分：

<nav>
    <a href="#profile">Profile</a>
    <a href="#writing">Writing</a>
    <a href="#presentations">Presentations</a>
    <a href="#recentwork">Recent Work</a>
</nav>

These links will go to <section> elements with matching id attribute values:

这些链接将转到具有匹配id属性值的 <section>元素：

<section id="profile">
    <h2>Profile</h2>
</section>
<section id="writing">
    <h2>Writing</h2>
</section>

The JavaScript, added to the bottom so it doesn’t block execution on the rest of the page. I’ve expanded the code slightly from the promised five lines for clarity:

JavaScript ，添加到底部，因此它不会阻止页面其余部分的执行。 为了清楚起见，我从承诺的五行代码中略微扩展了代码：

var anchorLinks = document.getElementsByTagName("nav")[0];
	if (window.scrollTo) {
		anchorLinks.addEventListener("click", 
		 function(e) {
			dest = document.getElementById(e.target.href.split("#")[1]);
			window.scroll({top: dest.offsetTop, behavior: 'smooth'});
		})}

The code uses event bubbling to listen to a click inside the nav element scrollTo method to get there instead, smoothed by the earlier CSS declaration. scrollTo takes a behavior and top argument, with an optional left argument, the latter two taking the coordinate information of the destimation.

该代码使用事件冒泡侦听nav元素的scrollTo方法内的单击以到达此位置，而通过较早CSS声明进行了平滑处理。 scrollTo采用behavior和top参数，并带有可选的left参数，后两个参数采用目标的坐标信息。

window.scrollTo is an alternative method; functionally, it and window.scroll are the same.

window.scrollTo是替代方法； 在功能上，它和window.scroll是相同的。

In comparison to a framework, this syntax is far simpler; the one downside is that it doesn’t allow the designer to change the timing function or scroll movement, to avoid abuses.

与框架相比，此语法要简单得多。 缺点之一是它不允许设计人员更改计时功能或滚动移动，以避免滥用。

结论 (Conclusion)

This technique is often combined with elements that are are “sticky”, i.e. elements that scroll with the page until they reach the top of the viewport, where they “stick” in place, which I cover in another article.

这项技术通常与“粘性”元素结合使用，即随着页面滚动直到到达视口顶部的位置，这些元素将“固定”在适当的位置，我将在另一篇文章中介绍 。

翻译自: https://thenewcode.com/507/Smooth-Page-Scroll-in-5-Lines-of-JavaScript

javascript 滚动