文转载自“什么值得买”用户众测报告。

前言

读书，是最对得起付出的一件事。你为此付出的精力，经过时间的沉淀，都会潜移默化的渗透到你的血液，侵入到你的骨髓，甚至扩散到你身体的每一个细胞里。对于文学的热爱，从儿时翻阅的《山海经》画本到学生时代的《鲁迅全集》，文字的魅力早已将我深深吸引，并扩张到我身体的每一个角落、扎实得根深蒂固，以至于成为我目前以及往后生活中不可或缺的调剂品。

感谢值得买给我的这次测评BOOX Nova电子阅读器的机会，让我开启了新的电子阅读模式。自从加入值得买后，看到很多人写的电子阅读器的测评贴，轻薄的机身、方便携带、墨水屏不刺眼、海量下载等阅读优势后，就被种草想入手一台，考察了几个牌子的阅读器，发现有些品牌的网络下载、模式转换较为繁琐，毕竟卤煮是个对电子产品不太精通的妹纸，所以简单粗暴的下载模式，是我这个数码小白最优先考虑的入手条件。此次测评的BOOX Nova电纸书，能够运行基于安卓定制的Neo Reader2.0系统，对文件的打开和传输更加方便，是更加适合对数码产品使用不是很熟络的妹纸使用，而且还支持阅读APP的下载，无需特别设置，可以直接打开，使用起来还是非常方便的！

外观设计

简单粗暴直接开箱，本次卤煮随机测评的是BOOX Nova 7.8寸墨水屏电子阅读器，因为此次测评是分型号随机发送的，开箱的时候发现自己收到的是7.8寸的Nova而不是6.0寸的POKE PRO，还让我感觉到些许的小确幸儿～

整体机身设计简约大气，无多余的装饰，机身厚度仅7.7mm，重量仅为240g，拿在手里轻巧玲珑，而且平面窄边外壳设计，一抛其他品牌外边框突出、外壳厚重的设计，BOOX Nova给人更纤薄时尚视觉感受，更便于随身携带！

整体后壳为深蓝色，但与机身前面的黑色外框并无违和感，后壳边框采用弧形设计，圆润光滑，相比较直边外壳，更加舒适，适合长时间手持阅读，手感很像iPhone手机的握持感，加上机身轻薄，提升了整体阅读的舒适性，磨砂后壳面板减少指纹印迹的同时，也避免了细微划痕对机身的损坏～

深蓝色后壳只有BOOX的简约logo印记，以及3C认证等标示，深蓝色的后壳在光线暗的地方，看起来更像是黑色，与机器前身的黑色边框相搭配，前黑后蓝的外壳设计，更显简单干练的商务风格～

7.7mm的纤薄机身，使其成为小屏阅读器中最具设计亮点的机型～

电子阅读器底部有可以正反盲插的type-c数据接口，支持USB接口的双面插入，使用起来很方便～

机器上部就是开关按键了，开机速度一般，需要等待20秒左右～开关按键的封闭性不太好，间隙较宽，使用时间久的话，难保没有集灰的问题。

正面边框还是未到达纯平面显示屏的制作工艺，这点有点小失望，正面边框处略微比屏幕高出几毫米，长时间使用还是会担心屏幕四框周围会出现集灰的问题。

随手拿了一本书和BOOX Nova在体积上做个比较，显而易见电子阅读器的优势马上就体现出来了，小巧轻便，方便外出随身携带，是电子阅读器相比较于纸质书最大的优点，而且32G的大存储量，可海量存储书籍。

可随身携带的口袋书～

7.8寸高清墨水屏

BOOX Nova屏幕部分采用7.8寸高清磨砂玻璃屏，分辨率可达到300PPI（1872*1404），页面显示非常清晰，看上去和纸质书一样的自然，几乎看不到行距间有杂质的细微存在。即使长时间看书，眼睛也没有看手机那样的刺眼，护眼性还是很不错的，这也是我摒弃手机而选择电子阅读器看书的最主要的诉求点。另外，7.8寸屏的可视面积相比较常规品牌的6寸屏幕要大出70%，大部份的漫画杂志APP下载后，都可以在Nova上得到更佳的阅读效果，可以说7.8寸屏完全可以满足我的日常阅读需要，而且Nova机型在所有BOOX机型中，性价比还是比较有优势的！

内置冷暖双色阅读灯，有16位等级亮度可调节，白天使用冷色系，夜晚黑暗环境下使用暖色系读书，无论是白天还是夜晚都能够减少屏幕光线对阅读者眼部的刺激，不受阅读环境的约束，随心而欲、想看就看～

触屏反应灵敏度很高，手指轻轻一划就能够迅速的翻到下一页，试用半个月并没有出现翻页卡顿的现象，即使我在屏幕上手残的贴了一张满是气泡儿的高清膜，也丝毫未减弱屏幕的反应速度，这点我还是很满意的！

字体可从10号字调到96号字，调节的范围很大，同时还可以选择字体以及间距样式等设置，完全可以根据自己的阅读习惯来选择，提升了阅读感受。这里特别说一下字体调节问题，之前不知道屏幕可以配合手势自动调节，每次想换字体的时候，都要轻点屏幕两下，跳出字体设置对话框来选择字体大小，偶然间发现系统自带手势调节，随时就可以在阅读页面调节字体，这一点我觉得在阅读的时候还是很方便的，系统设置里面有很多项的设置调节，但是对于字体调节这种常用设置，无需弹出对话框利用手势随意调整字体，确实方便了很多，这点我比较喜欢。当然，BOOX Nova是我的第一台电纸书，所以卤煮也不知道其他品牌的系统设置是否也这样人性化，只是挑出我个人比较喜欢的使用亮点来给各位值友分享一下～

通过对比度调节，也可以让屏幕上的黑色字体与白色底屏间调出更明显的黑白对比差，这样可以增加字体的清晰度，从而获得更好的阅读体验。

另外，阅读期间还可对个别词汇或某一句话进行标注、高亮或翻译等，便于你及时处理阅读问题，使用上很方便～

此外，还有屏幕字体旋转、自动翻页、页面刷新、自动翻页等设置功能，可以满足不同个性化阅读者的需要，是一台犹如私人定制般的、人性化的电子阅读产品。

硬件配置&系统功能

【硬件配置】BOOX Nova电纸书的配置很高，采用了主流的四核CPU（主频达到1.6GHz），存储方面2GB+32GB的配置，能够收纳海量藏书，冷暖双色温前置灯，300PPI 7.8寸Carta屏，在硬件配置上相比较其他安卓系统阅读器还是很有优势的。

【书库】BOOX Nova采用安卓系统及全新的2.0界面，减少操作步骤，提高系统下载效率。系统自带的“书库”可存储在“书城”下载的书籍，便于你随时翻看～

【书城】这里着重说一下“书城“的图书资源，这是BOOX新版才有的功能，可以与“京东读书”APP的账号绑定，享受同等的书籍资源，如果你是“京东读书”的老用户，用BOOX Nova登录你的“京东读书”账户后，就可以资源共享了，之前在京东购买的图书和看过的书籍都能同步到BOOX Nova的书库里，这一点可以说是非常贴心的！国内很多安卓系统品牌的电纸书，很少有阅读APP软件平台的支撑，以至于流失了很多用户，产品越做越少，最终退出市场。

【应用】BOOX Nova不仅有“京东读书”书城的强大后台支持，而且依靠自身高配置的安卓系统，可随意在网络上下载第三方APP应用软件，自由选择自己常用的主流阅读APP，像“亚马逊Kindle”、“豆瓣阅读”、“知乎”、“QQ阅读”、”当当云阅读“以及漫画APP软件“哔哩哔哩漫画”、“腾讯动漫”、“漫画人”等等，都可以直接点击下载，无需额外步骤，就可以轻松拥有。

这里需要说明的是：BOOX Nova新系统优化后，加入了“冻结管理”功能，暂时用不上、或是存在危险的APP可以被冻结，防止其释放内存、减少功耗、系统更省电更流畅！

除此之外，BOOX Nova支持pdf (支持2G以下）、djvu、epub、mobi、doc、docx、azw、azw3、fb2、html、rtf、txt、chm等多种文档格式的下载；图片格式支持：jpg、png、bmp、cbr、cbz等图片格式，基本覆盖了当前主流的电纸书文档格式，对日常阅读下载需要都可以等到满足。另外，BOOX Nova无需连接数据线，和相处同一个Wi-Fi下的电脑、手机直接进行文件传输，只需在电脑端打开官网、扫描二维码，就可以直接进行文件的传送了，支持200M大容量PDF文件传输，耗时短、速度快、使用方便～

【设置】设置页面主要是针对系统设置方面的调整，包括：“语言管理”、“日期设置”、“电源管理”、“网络设置”、“书库设置”、“账户设置”、“应用管理”、“固件更新”、“信息反馈”方面的系统设置。在具体使用中可根据个人的使用习惯进行调整。

APP阅读使用感受

在“应用”界面中选择“应用市场”就会进入系统自带的各种阅读APP，下载很方便，卤煮随手下载了几个经常使用的APP，比如“豆瓣阅读”、“QQ阅读”、“当当云阅读”、“漫画人”、“哔哩哔哩漫画”等软件，有文字类的也有漫画类的，APP下载速度很快，无需特别的设置即可直接下载使用，打开APP后通过系统对比度的调整和系统的优化，还是可以与本地文件阅读相媲美的。漫画APP翻阅效果一般，有残影和翻页卡顿的情况出现，使得阅读感下降，没看一会我就退出了。另外平时我也是以文字阅读为主，所以对漫画APP的好用与否也不是很介意～

《漫画人》APP阅读界面，整体画质清晰，但翻阅页面时会有卡顿现象。

《豆瓣阅读》可以在阅读APP页面进行优化调整，字体和背景光都可以调节，整体清晰度还是可以的，和本地文件阅读的页面清晰度没有太大的区别。

经两周的使用测试，APP在BOOX Nova上都能良好的运行，当然也有个别的APP软件使用感较差，比如“哔哩哔哩漫画”闪退现象很严重，后期让我直接卸载了，希望厂商能够进一步优化APP软件的稳定，提升阅读感受。当然，APP应用市场还是有很多优势可圈可点的，下载步骤简单，即使像我这样对数码产品不是很灵光的妹纸也能轻松使用，这是我对APP应用市场最满意的地方，简单易操作，使用上非常友好！

电池续航

BOOX Nova内置2800mAh超大电池，非常适合重度阅读者使用，对于我这种每天看书3小时一下的轻度阅读者，大概一周充一次电就可以了，而且系统开机设置5分钟默认熄屏，15分钟关机，大大减少的电池的能耗量，节约电耗！在Wi-Fi环境下使用APP网上阅读会更加耗电一些，这一点从逐渐微热的后壳就能感受到耗电量的增大。

另外，夜间打开背光灯会加大耗电量，电池会明显掉格，如果是白天不开背景光灯情况下使用，耗电量会明显减少。总之，对于我这种轻度阅读爱好者，一周充一次电，是完全可以胜任的，具体的耗电量还要根据你的具体阅读时间和阅读环境来衡量，这里不再赘述～

本篇总结

经过两周的测试，总体看来BOOX Nova的硬件配置及安卓定制的开放性系统，相比其他同类产品在阅读体验及功能扩展上更胜一筹！作为一款日常阅读使用的电纸书，BOOX Nova7.8寸屏的配置完全可以胜任日常阅读的需要，在性价比上也可以堪称是电子阅读器中的“小钢炮”，尤其是平时阅读网文的读者，安卓开放性系统，适合多种格式的文件下载，避免用手机长时间阅读对眼睛的伤害，是重度阅读者日常必不可少的随身电子产品。当然，BOOX也有些许的缺点，需要产品继续的升级优化，下面卤煮就对这款电子阅读器的优缺点做一个总结。

优点：

1、外观设计简约时尚，轻薄小巧，7.8寸屏即可满足阅读的需要，外出时也可以随身携带，可满足利用碎片时间随时看书的需要。

2、凭借开放性的安卓系统、四核CPU、2GB+32GB的存储配置、300PPI 7.8寸Carta屏的高配置，打败同行业其他同类产品，并获得“亚洲电子信息产业产品创新大奖”。

3、在产品创新方面，BOOX Nova采用先进的排版引擎、文档转换、压感手写等核心技术，使阅读感提升，操作上简单便捷。

4、冷暖双色背景灯调节，满足不同阅读环境的使用，保护视力，减少视疲劳。

5、依托“京东读书”软件，可同步登录京东读书账户，除强大的后台支撑外，还可以随意下载各种阅读APP软件，步骤简单易操作，满足日常阅读需要。

6、相同局域网下可无线传输文件，使用方便，并且传输速度很快。

7、支持蓝牙功能，听音乐阅读可同时进行。

缺点：

1、背景灯需要手动调节，不能自动适应调节，这点还是有些小遗憾。

2、在线看漫画APP软件，会出现闪退、卡顿的问题，翻页也会有残影的问题存在。

3、无截屏分享功能，有好的内容无法截屏下载，这点有些不太方便。

4、无耳机插孔，只能用蓝牙耳机听音乐，如果有插孔使用上会更方便一些。

5、顺便吐个槽，整机只有一个连接线配件，还需自己另配插头、外壳、以及贴膜等配件产品，而且配件的价格简直要贵的离谱，京东及淘宝购买同品牌的保护壳需要96元钱，这价格足够让你咂舌的了，希望厂商能够放开配件的供应量，压低配件价格，让用户可以随心所欲的去购买。

以上，感谢各位观看，作为一个数码小白，BOOX Nova在两周的试用期间，我都能轻松驾驭，随意下载各种APP软件，局域网内无限传输也可以很轻松的完成，系统支持多格式文件下载，不用来回转换下载格式，系统简单易操作，对于女性用户在使用上是比较友好的，是这款电子阅读器最大的优势！只有这样易操作的数码产品，后续才能继续使用下去，避免被闲置的下场，如果你也是个对数码产品不感冒的妹纸，也想用碎片时间看看书，那么这款轻薄简约、外出易携带的BOOX Nova电纸书就非常适合你了，喜欢的值友可以考虑入手，推荐！

现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。

我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。

而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。

岁月在流逝，时代在进步。

愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎样，我都相信肯定比今天更好。

本文以一个网页版阅读器作为案例，展示JavaScript中，对滚动条的一些处理，这是完成以后的样子：

当我滚动条往上滚动的时候，屏幕右下角会出现一个向上的箭头：

而往下滚动的时候，又自动消失。

当我点击这个半透明的箭头按钮，就会自动滑动到章节的最顶端。

本章就实现这个小功能。

开发工具：HBuilder（个人喜欢，顺从潮流放弃了使用大半年的EditPlus，不过EditPlus确实锻炼了我拼写单词的能力）

测试环境：谷歌浏览器

正文

1. 页面布局与绘制

我们写一个基本的html模板

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>TextReader</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 }
 </style>
 </head>
 <body>
 
 </body>
</html>

接着，我们把背景图片引入进来（尺寸略有调整）：

body{
 background: url(bg.jpg) no-repeat;
 background-size: 100%;
}

我们先写一个div，作为盛放整个手机的父容器。

在它的css样式中，我们做了居中定位（水平）。

.phone {
 width:322px ;
 height:550px; 
 position:relative;
 left:35%;
 top:35px;
 background: #66CC00;
}
<div class='phone'></div>

接下来，引入上下两端的样式图片。

其实，手机的顶部和底部就是两张图片：

我们先把顶部图片引入进来，在引入图片之前，先画两个div来盛放图片。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 
 <div class='phone-bottom'></div>
 </div>
</body>

然后，通过背景图的方式把图片贴进来。

.phone .phone_top {
 background: url(phone_top.png);
 height:42px;
}
.phone .phone-bottom {
 background: url(phone_bottom.png);
 position: absolute;
 height: 42px;
 width: 100%;
 bottom: 0;
} 

这样一来，一个手机的大概模子就出来了，接下来，我们把屏幕区域加上去。

.phone .container{
 overflow-x: hidden;
 overflow-y: auto;
 width:90%;
 background:#ccc;
 height:456px;
 font-size:14px;
 text-align:left;
 background:#dcf3dc;
 font-family:微软雅黑;
 color:#555;
 line-height:28px;
 padding:16px;
 text-indent: 2em;
 padding: 16px 16px 0px 16px;
}
<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'></div>
 <div class='phone-bottom'></div>
 </div>
</body>

OK，现在可以把父容器的背景色给去掉了。

background: #66CC00; //去掉

为了把手机模型做得更像一点，我们手动给它加一个按钮，额，就手动画一个吧。

.back {
 width: 30px;
 height: 30px;
 position: absolute;
 left: 50%;
 margin-left: -15px;
 border: 2px solid #c7bcbc;
 top: 4px;
 border-radius: 50%;
}
<div class='phone-bottom'>
 <span class='back'></span>
</div>

虽然span是行内元素，但是因为我们给它设置了 position: absolute ， 所以宽度和高度依然是起作用的。

我也是在写这个案例的时候无意中发现的，我以前一直以为需要手动给行内元素升级为块级元素才行。

这样，我们的页面布局差不多久完成啦。

2. 文字部分设计与美化

接下来，我们给阅读器模拟一些数据。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'>
 <h4>刀剑神域 </h4>
 <p>
 在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。
 </p>
 <p>
 经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。 
 </p>
 <p>
 横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。 
 </p>
 <p>「呼……」 
 </p>
 <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。 </p>
 
 <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。 </p>
 <p>不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。 
 </p>
 
 </div>
 <div class='phone-bottom'>
 <span class='back'></span>
 </div>
 </div>
</body>

滚动条的样式不太美观，我们将其美化一下

/** 滚动条样式美化 */
::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

这样就好看多了。

标题部分有一点突兀，我们给出四条美化的建议：

1. 标题居左对齐

2. 底部画一条线，与小说正文分开，并且空开一些。

3. 字体颜色稍微淡一些，不要太黑

4. 字间稍微距大一些

于是

.phone .container h4 {
 text-indent: 0;
 margin-bottom: 1em;
 color:#736357;
 border-bottom:1px solid #736357;
 letter-spacing: 2px;
}

这样好看一些了吧，当然，每个人审美观不同啦，你也可以调成自己喜欢的样式。

段落之间和文字间距都太小了，我们也调一下，不要那么小气嘛，哈哈。

.phone .container p {
 margin-bottom: 15px;
 letter-spacing: 2px;
}

恩，好多了。

3. 引入向上的箭头图标

我们准备了一张半透明的箭头图标，现在将其引入。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'>
 
 <span id='toTop'></span>
 
 <h4>刀剑神域</h4>
 <p>
 在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。
 </p>
 <p>
 经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。 
 </p>
 <p>
 横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。 
 </p>
 <p>「呼……」 
 </p>
 <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。 </p>
 
 <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。 </p>
 <p>不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。 
 </p>
 
 </div>
 <div class='phone-bottom'>
 <span class='back'></span>
 </div>
 </div>
</body>

样式如下：

.phone .container #toTop {
 width: 40px;
 height: 60px;
 display: inline-block;
 position: absolute;
 background: url(top.png) no-repeat;
 background-size: 100%;
 bottom:80px;
 right: 15px;
 opacity: 0.7;
}

引进来了。

4. js控制

我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。

//单机图标直接返回顶部
$('#toTop').on('click',function(){
 $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){
 $('#toTop').css({'opacity' : 0}); 
 });
 
 return false;
});

最后，我们还希望实现的一个效果就是，只有在滚动条往上拖动的时候，才把按钮显示出来，否则就隐藏该按钮。毕竟，我们在阅读的时候都不希望一直有个小图标吧。

实现思路也很简单，就是判断当前滚动条到底是向上滚动呢，还是向下滚动？

然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下：

var justScrollTop = 0; //记录上一次滚动条距离顶部的位置
//滚动条监听事件
$('.phone .container').on('scroll',function(e){
 if(e.target.scrollTop > justScrollTop){
 $('#toTop').css({'opacity' : 0}); //隐藏
 }else{
 $('#toTop').css({'opacity' : 0.8}); //显示
 }
 
 justScrollTop = e.target.scrollTop;
});

效果：

如果有没看明白的地方，欢迎在下面评论，或者私信我，都可以。

如果有必要，我会在下一期通过举例子的方式做解答。