丁丁生于 1987.07.01 ,30岁,英文ID:newflydd
页面中「返回顶部」图标按钮的实现
「返回顶部」现在广泛用于各大网站,尤其是页面高度比较高,干货内容比较多的网站,简直风靡一时
如何将「返回顶部」做得美观得体这是个问题,下面跟我一起来设计网站的「返回顶部」图标按钮。
首先定义一个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
标签。
效果如图所示: