如何实现“返回顶部”的页面效果
2023-02-18 15:28:50 时间
在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现“返回顶部”的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图:
首先必须感谢知乎,因为这个按钮的样式就是照抄他们的,纯CSS实现,无图片,我只改了颜色。
关于如何用CSS画三角形,参考纯CSS气泡效果一文。
首先,在body中添加“返回顶部”按钮:
<body>
<div class="go-top">
<div class="arrow"></div>
<div class="stick"></div>
</div>
...
</body>
重点是go-top的CSS定义:
div.go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}
div.go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div.go-top div.arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}
div.go-top div.stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。
按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现,代码相当简单:
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 1000)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
});
当按下按钮时,有动画效果返回顶部。
jQuery实在是太强大了,以至于如果你还不会jQuery那你永远都不可能成为一个真正的前端工程师!
相关文章
- PostgreSQL计算影响某地的台风
- 不止于“算”,开放计算加速技术落地和行业赋能
- 云计算行业这些热点事件透露了哪些玄机?
- 挑战-40℃-70℃极限值,这款独具匠心的边缘计算设备是如何炼成的?
- 解决Windows远程桌面连接工具连接不上远程操作系统的问题
- “种”下黑科技,守护每株绿,“植”了!
- 什么是VXLAN?为什么需要VXLAN?
- makefile:带你了解一种常用于GNU gcc编译的工具语言
- Everything is Serverless,从开源框架对比说起
- “七大属性加持,三个全新升级组件”这个高性能利器有点厉害
- 华为云PB级数据库GaussDB(for Redis)介绍第四期:高斯 Geo的介绍与应用
- #开工新姿势#开启一年新征程,云社区叫你来充电啦!
- 云小课 | 守护网络安全不是问题,iptables的四表五链为你开启“八卦阵”
- 所见即搜,3分钟教你搭建一个服装搜索系统!
- AI辅助宫颈癌筛查技术全球居首,守护者的力量来源是?
- 网络知识一箩筐:IP地址划分的那些知识点
- MindSpore:基于本地差分隐私的 Bandit 算法
- 越来越受欢迎的Vue想学么,90后小姐姐今儿来教你
- 常见的6种MySQL约束
- 大括号之谜:C++的列表初始化语法解析