首先，不同的页面之间再怎么平滑，也无法避免浏览器在载入新页面时必然产生的一个刷新动作，这是无法避免的，毕竟这是浏览器，不是app；
其次，即使上述你觉得不是问题，但css本身不是程序，它不可能知道页面之间的切换行为，因此用纯css肯定是无法实现的，必须结合js才行。
一个比较有可能实现的方案就是：通过js在前一个页面的unload事件中把页面逐渐过渡到全白，在后一个页面的load事件中把页面从全白过渡到完全显示。
不过我觉得这简直是舍本逐末啊，还是先把页面的内容搞好把，这些花架子还是少弄为佳。你也不想想为啥其他大网站都没有这样的效果，难道就只有你一个人想到了吗？
节流函数是防止短时间内多次触发的一个处理函数如：滚动事件，使用 addEventListener 方式添加监听器
为了使节流之后滚动更加的平滑， 我们可以使用 window.requestAnimationFrame() 来实现节流函数
在视窗中显示
当需要实现图片的懒加载或者是无限滚动时，需要确定元素是否出现在视窗中， 这样需要获取 elem.getBoundingClientRect()
注意： 每次调用 getBoundingClientRect 时都会触发回流， 这样会严重的影响性能，特别是在事件处理函数中，会更加的严重影响性能；
在 2016 年之后， 可以通过 Intersection Observer 这个 api 来解决问题， 它允许你追踪目标元素与其祖先元素或者视窗的交叉状态， 另外只有一部分元素出现在视窗中，哪怕只有 1 px ， 也可以选择触发回调函数
滚动边界的问题：
当用户滚到末尾时， 整个页面都会开始滚动；
连锁滚动的表现， 当滚动有；元素到达底部时，可以改变页面的 overflow 属性或者在滚动元素的滚动事件处理函数中取消默认行为来解决这个问题
如果使用 JavaScript 处理， 那么处理的不是 scroll 事件， 而是每当用户使用鼠标滚轮 或者 是触摸板时 触发的是 wheel 事件
过度滚动对移动端的影响尤为的严重，下拉刷新的手势在 安卓的chrome 浏览器中，问题出现了，它会刷新整个页面， 而不是加载更多的内容；这个就会产生很多问题；
css 通过 overscroll-behavior 这个新属性解决问题。它通过控制元素滚动到尽头时的行为来解决 下拉刷新与 连锁滚动带来的问题。安卓的 glow 与苹果中的 rubber band。
准确的说， IE 与 Edge 实现了独有的 -ms-scroll-chaining 属性来控制连锁滚动；
微软浏览器已经准备实现 overscroll-behavior 这个属性
在触屏设备上，滚动的体验是一个很大的话题。
苹果公司开发了 惯性 滚动的专利；
css 有一个很hack 的方法；
只支持 webkit 内核，
但是我们会使用 touch 事件来解决这个问题，但是这个会对用户滚动体验造成很大的影响；
在现代的浏览器中，虽然知道如何使滚动变得平滑，但为了 确定滚动事件处理函数中是否执行了 阻止默认事件 ；可能任会花费 500 mm 来等待事件处理函数执行完毕
即使是一个空的事件监听函数， 从不取消任何行为，鉴于浏览器会期待 preventDefault 的调用， 也会对性能造成影响
为了告诉浏览器不去检测事件是否阻止了默认事件，在 whatwg dom 标准中，存在一个特性，来解决这个事件，
这个视频会看到带来的性能提升： https://www.youtube.com/watch?v=NPM6172J22g
此文借鉴： http://caibaojian.com/css-scroll.html
不用锚点也可以平滑滚动到页面的指定位置复制代码
代码如下:
<!DOCTYPE
html>
<html
>
<head>
<meta
content="text/html
charset=utf-8"
/>
<title>ScrollTo：平滑滚动到页面指定位置</title>
<link
rel="stylesheet"
type="text/css"
href="../css/main.css"
/>
<style
type="text/css">
.nav{width:500pxmargin:10px
auto}
.nav
li{float:left
width:100px
height:24px
line-height:24px}
.box{height:500px}
.box
h3{height:32px
line-height:32px
padding-left:20px
font-size:14px}
.clear{clear:both}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0padding:0border:0outline:0font-size:100%vertical-align:baselinebackground:transparent}
a{color:#007bc4/*#424242*/
text-decoration:none}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapseborder-spacing:0}
body{height:100%
font:12px/18px
"Microsoft
Yahei",
Tahoma,
Helvetica,
Arial,
Verdana,
"\5b8b\4f53",
sans-serif
color:#51555C
background:#162934
url(../images/body_bg.gif)
repeat-x}
img{border:none}
#main{width:910px
min-height:600px
margin:30px
auto
0
auto
background:#fff
-moz-border-radius:12px-khtml-border-radius:
12px-webkit-border-radius:
12px
border-radius:12px}
h2.top_title{margin:4px
20px
padding-top:15px
padding-left:20px
padding-bottom:10px
border-bottom:1px
solid
#d3d3d3
font-size:18px
color:#a84c10}
</style>
<script
type="text/javascript"
src="http://jt.875.cn/js/jquery.js"></script>
<script
type="text/javascript"
src="http://jt.875.cn/js/scrollto.js"></script>
<script
type="text/javascript">
$(function(){
$(".nav_pro").click(function(){
$.scrollTo('#pro',500)
})
$(".nav_news").click(function(){
$.scrollTo('#news',800)
})
$(".nav_ser").click(function(){
$.scrollTo('#ser',1000)
})
$(".nav_con").click(function(){
$.scrollTo('#con',1200)
})
$(".nav_job").click(function(){
$.scrollTo('#job',1500)
})
})
</script>
</head>
<body>
<div
id="main">
<h2
class="top_title">ScrollTo：平滑滚动到页面指定位置</h2>
<ul
class="nav">
<li><a
href="#"
class="nav_pro">产品展示</a></li>
<li><a
href="#"
class="nav_news">新闻中心</a></li>
<li><a
href="#"
class="nav_ser">服务支持</a></li>
<li><a
href="#"
class="nav_con">联系我们</a></li>
<li><a
href="#"
class="nav_job">人才招聘</a></li>
</ul>
<div
class="clear"></div>
<div
id="pro"
class="box">
<h3>产品展示</h3>
</div>
<div
id="news"
class="box">
<h3>新闻中心</h3>
</div>
<div
id="ser"
class="box">
<h3>服务支持</h3>
</div>
<div
id="con"
class="box">
<h3>联系我们</h3>
</div>
<div
id="job"
class="box"
style="height:680px">
<h3>人才招聘</h3>
</div>
</div>
</body>
</html>
JS
插件：scroll
to
