丁丁的个人博客

「返回顶部」现在广泛用于各大网站，尤其是页面高度比较高，干货内容比较多的网站，简直风靡一时
如何将「返回顶部」做得美观得体这是个问题，下面跟我一起来设计网站的「返回顶部」图标按钮。

首先定义一个a标签：

<a href="#" title="回到顶部" style="display:none" class="am-icon-btn am-icon-arrow-up" id="goTop"></a>

使用display:none先将其隐藏，这里应用到了AmazeUI的class名，但是我并不想将AmazeUI的css全部引入，毕竟这个页面除了返回顶部，不需要AmazeUI的其他功能。
那就自己来写这几个class的css吧：

#goTop{
    position:fixed;
    bottom:20px;
    right:20px;
    text-decoration:none;
}

这个很容易理解，固定到屏幕右下方。

.am-icon-btn{
    box-sizing:border-box;
    display:inline-block;
    width:48px;height:48px;
    font-size: 24px;
    line-height:48px;
    border-radius:50%;
    background-color:#CCC;
    color:#555555;
    text-align:center
}

这个类主要定义的边框，一个灰色背景的圆形按钮

.am-icon-arrow-up:before{
    content:"\f062";
    font-family: "FontAwesome"
}

这个是定义图标字体的，并且使用了伪类before，表示将会在a标签内部的开始位置添加一个字符\f062，这个字符来自于FontAwesome字体，对此不太了解的可以参考：https://fontawesome.io/icons/
因为并未使用AmazeUI的整个库，那么FontAwesome就要自己来定义了，借此机会熟悉一下CSS中引入新字体的方法：

@font-face {font-family:'FontAwesome';src:url('../amazeui/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('../amazeui/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../amazeui/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../amazeui/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../amazeui/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype');font-weight:normal;font-style:normal}

这些eot、woff、ttf文件是适配不同浏览器差异的，这些图标字体来自于AmazeUI，或者在https://fontawesome.io/icons/ 下载，体积在100KB左右，浏览器将在能成功寻找到的第一个字体库后结束寻找，一般将这个@font-face放到CSS文件的顶部，免得应用图标时找不到字体。
到此为止就设计出「返回顶部」的样式了，下面要写JS来实现其功能：

$('#goTop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);return false;});
window.onscroll = function () {
    if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        document.getElementById("goTop").style.display = "block";
    }
    else {
        document.getElementById("goTop").style.display = "none";
    }
}

代码相当简单，第一行使用jQuery的语法，在800毫秒内将html标签和body标签移动到顶部0像素，也就是最顶部。
第二段是监听页面的滚轮事件的，当页面滚轮距离顶部100像素以内时，隐藏我们的a标签，否则显示a标签。

效果如图所示：