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

发布时间:2020-07-24 07:43:46 作者:hudidit
来源:网络 阅读:628

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

图片来源:Inspiring Wallpapers

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


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

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

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

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

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

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

默认状态的箭头


<?xml version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 50 50" width="50px" height="50px" x="0px" y="0px" id="Layer_1" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polyline points="0,25 25,5 50,25" />
</svg>


鼠标移上去之后的箭头



<?xml version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 50 50" width="50px" height="50px" x="0px" y="0px" id="Layer_1" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polyline points="0,25 25,5 50,25" />
</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

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


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

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

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

推荐阅读:
  1. Web安全,向“前”看!——读国内第一本Web前端***书
  2. web前端需要用来的技术有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web前端 回到顶部 为你

上一篇:python学习笔记1:变量+数据类型+字符串

下一篇:Exchange 2019预览版部署安装——Part2

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》