页面中「返回顶部」图标按钮的实现

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

首先定义一个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}

这些eotwoffttf文件是适配不同浏览器差异的,这些图标字体来自于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标签。

效果如图所示:

丁丁生于 1987.07.01 ,30岁,英文ID:newflydd

  • 现居住地 江苏 ● 泰州 ● 姜堰
  • 创建了 Jblog 开源博客系统
  • 坚持十余年的 独立博客 作者
  • 大学本科毕业后就职于 中国电信江苏泰州分公司,前两年从事Oracle数据库DBA工作,两年后公司精简技术人员,被安排到农村担任支局长(其本质是搞销售),于2016年因志向不合从国企辞职,在小城镇找了一份程序员的工作。
  • Git OSChina 上积极参与开源社区