前端 css+js实现返回顶部功能-阿里云开发者社区

开发者社区> annehan> 正文

前端 css+js实现返回顶部功能

简介: 描述:        本文主要是讲,通过css+js实现网页中的【返回顶部】功能。   实现代码: HTML: 1 2 返回顶部 3   CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position:...
+关注继续查看

描述:

       本文主要是讲,通过css+js实现网页中的【返回顶部】功能。

 

实现代码:

HTML:

1 <div>
2     <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
3 </div>

 

CSS:

 1 /* return top */
 2 #btnTop {
 3   display: none;
 4   position: fixed;
 5   bottom: 20px;
 6   right: 30px;
 7   z-index: 99;
 8   border: none;
 9   outline: none;
10   background-color: #89cff0;
11   color: white;
12   cursor: pointer;
13   padding: 15px;
14   border-radius: 10px;
15 }
16 #btnTop:hover {
17   background-color: #1E90FF;
18 }

 

JS:

 1 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 2 window.onscroll = function() {
 3     scrollFunction()
 4 };
 5  
 6 function scrollFunction() {
 7     console.log(121);
 8     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 9         document.getElementById("btnTop").style.display = "block";
10     } else {
11         document.getElementById("btnTop").style.display = "none";
12     }
13 }
14  
15 // 点击按钮,返回顶部
16 function returnTop() {
17     document.body.scrollTop = 0;
18     document.documentElement.scrollTop = 0;
19 }

 

 

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

如果您想转载本博客,请注明出处

如果您对本文有意见或者建议,欢迎留言

感谢您的阅读,请关注我的后续博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.
摘要: BUG监控插件压缩至18K。 1.7.0拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~ 拆分录屏代码 从1.7.0版本开始,我们拆分了录屏代码。
1349 0
飞天加速计划·高校学生在家实践丨ECS使用体验丨宝塔面板实现多端口建站与SG11解密基础学习
大家好!我是呆小猴,软件工程专业,目前是一名大四学生。首先非常感谢阿里云爸爸的这次活动,让我体验了一次什么是云服务器,在这之前只使用过虚拟主机和轻量云服务器,可以感受到了它们之间的差别。很早就关注阿里云之前的学生云翼计划了,可惜一直没有时间,现在刚好参加这次的飞天加速计划,也分享一些我的经验与心得~
236 0
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
728 0
+关注
annehan
一个95后 一个程序媛
48
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载