在上个月开发主题的时候用到了很多以前没见过的 CSS ，这里随便水个文记一下。
原先这个主题在文章下方的作者是有一个分享文章到 facebook 和 twitter 的。在转移主题到 Hexo 的时候也就顺便复刻了下来。
现在主题自己用了就随便改，中国用 facebook 和 twitter 的肯定少，而且也不会有人分享，就直接删了。
删了后很空，那得加个东西，想了一下刚好少个返回顶部的按钮，而且这个分享部件刚好在文章底部，很合适。
一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。
锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
但实际上CSS的 scroll-behavior 可以解决这个问题。只需要在滚动的部分加上这么一段：
html,body{
scroll-behavior:smooth;
}具体效果你已经可以点击右边的文章目录或者底部的按钮来试试了。
建议可以滚动的地方都加上 scroll-behavior ，不用白不用。
貌似目前主流浏览器都支持了，当然IE不是主流。
浏览器的滚动条是有宽度的，而且会占用页面的空间导致页面抖动。
原本我是参考了泽泽的网页滚动条占用网页宽度导致网页抖动问题来解决的，现在发现了一个新的 CSS 可以用。
:root{
scrollbar-gutter:stable;
}这个 CSS 是固定留一个空间让滚动条使用，这样有没有滚动条页面都是一个宽度，也就不会造成页面抖动。听起来还不错，但是兼容性很差，总之还是用泽泽的方法吧。
再顺便说一下语法：
scrollbar-gutter:auto; /*默认*/
scrollbar-gutter:stable; /*预留空间给滚动条*/
scrollbar-gutter:stable both-edges; /*两侧都预留空间给滚动条 可能比较对称*/