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

　　

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

图片鼓舞人心的壁纸

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


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

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

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

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

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

<编辑>简单说下制作过程 　　 1。用SVG画出箭头 　　

默认状态的箭头 　　


& lt; ?xml version=" 1.0 " ?比; 　　& lt; !DOCTYPE svg公共”——//W3C//DTD svg 1.1//EN ' ' http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd '比; 　　& lt; svg使背景=靶? 0 50 50”宽=?0 px高=?0 px x=0 px y=" 0 px " id=" Layer_1 " version=" 1.1 " viewBox=" 0 0 50 50”xml:空间="保存" xmlns=" http://www.w3.org/2000/svg " xmlns: xlink=" http://www.w3.org/1999/xlink "比; 　　& lt;多线点=" 5 50 0,25 25日,25日”/比; 　　& lt;/svg> 　　


鼠标移上去之后的箭头 　　



& lt; ?xml version=" 1.0 " ?比; 　　& lt; !DOCTYPE svg公共”——//W3C//DTD svg 1.1//EN ' ' http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd '比; 　　& lt; svg使背景=靶? 0 50 50”宽=?0 px高=?0 px x=0 px y=" 0 px " id=" Layer_1 " version=" 1.1 " viewBox=" 0 0 50 50”xml:空间="保存" xmlns=" http://www.w3.org/2000/svg " xmlns: xlink=" http://www.w3.org/1999/xlink "比; 　　& lt;多线点=" 5 50 0,25 25日,25日”/比; 　　& lt;/svg> 　　




两者区别只在颜色,倒数第二行折线的风格里面的中风属性。 　　

2。用工具把SVG转换成dataURI(可选) 　　

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


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




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

图片自己以前拿朋友手机拍的…… 　　


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

<编辑> 3。JavaScript:把箭头放到合适的位置,在合适的时候出现 　　

<强> 2013.10.23上午更新: IE8和Firefox里不能显示的问题已修复,虽然IE8以下的浏览器里面很丑……修改后的代码有点长,就不贴在文章里了,有兴趣的朋友可以

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