前端开发入门到实战：CSS 页面滚动平滑

1. 这些年自己步子慢了

这些年自己在无障碍访问，SVG和Canvas这些偏小众的领域花了大量的学习精力，以至于很多前端新特性，新技术没能及时关注和了解，有CSS3领域的新属性，有JS领域的新API，包括全新的ES6/ES7语法等，相比以前的学习，步子确实慢了。比方说，本文要介绍的平滑滚动，无论是CSS还是JS，现代浏览器都提供了原生的属性或方法支持，而且差不多已经有一年时间，而我最近才知道，和数年前实时关注新技术的自己形成了明显的对比。

不过随着SVG和Canvas的基础越来越牢固，细节越来越深入，我的学习重心已经开始往广度方向转移，慢慢拾起那些遗落的麦穗。

2. 从干巴巴到又湿又滑

假设页面中有下面这一段HTML：

<a href="#" rel="internal">返回顶部</a>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

帮我们点击“返回顶部”这个文字链接的时候，页面就会“唰”地一声瞬间定位到浏览器顶部，速度之快，升势之猛，以至于你没有任何反应，就像暴风雨般的爱情，让你猝不及防，脑中不断回想：“我在哪里？我是谁？我刚刚做了什么？”

所有这些反应的产生，归根结底在于我们这个滚动效果实在是太干巴巴了，机械生硬没有灵性不解风情。

人是有情感的动物，既然我们做的网页是给