你写了一篇2000字的长教程,客户滑到底部想返回顶部看导航。手机上要滑半天。加个回到顶部按钮,点一下秒回顶部。

怎么做

第一种,CMS主题自带。现在大部分免费主题都内置回到顶部按钮。你在主题设置里找一下,开启就行。一般是右下角一个小箭头图标,页面往下滑一定距离才出现,滑回顶部自动隐藏。

第二种,插件实现。免费CMS有专门的「回到顶部」插件。装上之后自动在右下角加按钮。能设置按钮颜色、图标、显示位置。

第三种,自己加一段代码。在主题的footer文件里加一段简单JS:监听页面滚动,超过300px就显示一个固定定位的按钮,点击就平滑滚回顶部。三十行代码。

按钮怎么设计

第一,别太大。30x30像素就行。别挡住右下角的在线客服按钮。

第二,颜色跟网站风格一致。别搞个亮黄色按钮,跟你网站蓝色风格完全不搭。用主题主色。

第三,别一直显示。页面在顶部的时候隐藏按钮,客户往下滑一段距离才出现。客户在顶部的时候不需要这个按钮。

第四,手机端要适配。按钮别挡住手机端的固定客服条。位置稍微往上调一点。

为什么要加

听起来是个小功能。但长文章、教程类网站,客户看一半想回顶部看目录、看导航,没有回到顶部按钮真的很烦。小功能大体验。

你自己写一篇长文章试试:滑到底部,没有回到顶部按钮,你要划半天才能回去。客户划两下就走了。