平武建站

BackToTop.js为你的网站添加“回到顶部”按钮-创新互联

BackToTop.js 为你的网站添加“回到顶部”按钮

创新互联是一家集网站建设,新城企业网站建设,新城品牌网站建设,网站定制,新城网站建设报价,网络营销,网络优化,新城网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
图片来源：Inspiring Wallpapers

就像上图中的超人一样，你的读者也想要一飞冲天的感觉。

没错，你的网站需要一个 “回到顶部” 的按钮。

每当你的文章写得很长，或者评论盖了好几十层楼的时候，用户想要回到顶部就成了一件折磨的事情，鼠标滚轮滚得要烧起来有木有？即便是直接拖动滚动条，多少还是有点不痛快。正因如此，有时你觉得碍手碍脚的一个小按钮，此时却显得那么贴心。

我知道对很多人来说，上面都是废话。好的，废话少说，讲正经的。这篇文章是跟大家分享一下我自己写的一个超简单的 “回到顶部” 按钮——就是右下角那个箭头。

不嫌弃它简陋的话，欢迎右键另存为：完整带注释版 /压缩版（文件全部是 UTF-8 编码，如果浏览器默认 GBK 编码，你直接打开可能会看到乱码）。在网站的模板里引用这个文件，网站的每一个页面就都有 “回到顶部” 按钮了。

更多精彩文章，请访问作者博客-胡作菲为

简单说下制作过程
1. 用 SVG 画出箭头

默认状态的箭头

鼠标移上去之后的箭头

两者区别只在颜色——倒数第二行polyline的style里面的stroke属性。

2. 用工具把 SVG 转换成 dataURI（可选）

为了节省 HTTP 请求，这么小而简单的 SVG 图形，我决定把它转换成 dataURI。 Google 了一下，果然有现成的工具。于是，上面的两个图标分别被转换成了下面的两串字符。

// 默认状态下的箭头
"data:p_w_picpath/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHg9IjBweCIgeT0iMHB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5bGluZSBwb2ludHM9IjAsMjUgMjUsNSA1MCwyNSIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDozOyIvPjwvc3ZnPg=="
// 鼠标移上去之后的箭头
"data:p_w_picpath/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHg9IjBweCIgeT0iMHB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5bGluZSBwb2ludHM9IjAsMjUgMjUsNSA1MCwyNSIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7c3Ryb2tlOiM5OTk7c3Ryb2tlLXdpZHRoOjM7Ii8+PC9zdmc+"

接下来那段比较枯燥，给大家插播一张南京鸡鸣寺的照片。BackToTop.js 为你的网站添加“回到顶部”按钮

图片来源：自己以前拿OPPO手机拍的……

更多精彩文章，请访问作者博客-胡作菲为

3. JavaScript：把箭头放到合适的位置，在合适的时候出现

2013.10.23上午更新：IE8和Firefox里不能显示的问题已修复，虽然IE8以下的浏览器里面很丑。。。修改后的代码有点长，就不贴在文章里了，有兴趣的朋友可以点此查看，或者右键另存到本地。代码里有很详细的注释。

这里要插一句：通常是很不推荐在 JavaScript 里面设置、修改元素的样式的，这里我这样做是因为不想再另外写一个 CSS 文件，又要多一个 HTTP 请求，让这个超简单的东西变复杂。

2013.10.23下午更新：你可以选择是否平滑滚动，默认是平滑的。喜欢摆弄代码的朋友，可以对 backToTop.js（或 backToTop.min.js，取决于你引用的是哪一个）末尾的 backToTop() 做如下设置：

backToTop({

backToTop({
  // 不想要平滑的滚动，就像下面这样设置为 false
  smooth: false,
  // 滚动的时长，以毫秒为单位
  time: 300
});

最后

backToTop.js

在改进代码的时候，下面几篇文章给了我很大帮助：

  • 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

  • Detect IE

  • smoothscroll

我知道肯定有大大在嘲讽我：“这么简单的玩意儿也拿出来说。”

是的，我很享受这个分享的过程，并且会更享受之后的交流和讨论，哈哈！

更多精彩文章，请访问作者博客-胡作菲为

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：BackToTop.js为你的网站添加“回到顶部”按钮-创新互联
网页链接：http://pwwzsj.com/article/dcpiih.html

其他资讯