scrollTop回到顶部总结
来源:互联网 发布:淘宝sop搜索 编辑:程序博客网 时间:2024/05/17 22:33
网站中的回到顶部功能有益于增强用户体验,当一个页面很长很长时,回到顶部是必不可少的。
回到顶部按钮,可以使用图片,背景图,矢量字体图标,也可以使用代码 css 生成。这里使用 css 生成的方法。
<a href="" title="回到顶部" id="toTop"> <span id="arrow"></span></a>
#toTop { display: none; position: fixed; /* 固定定位 */ right: 10px; bottom: 30px; background-color: #e6e6e6; height: 40px; line-height: 40px; width: 40px; transition: all .4s ease .1s;}#toTop:hover { background-color: #b7b7b7; }#toTop span { position: relative; /* 相对定位,以便其伪元素绝对定位 */ top: 5px; left: 15px; /* 变换为顺时针旋转 30°,通过数学角度计算后适当调整位置 */ display: inline-block; width: 3px; height: 20px; background-color: #fff; border-radius: 3px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);}#toTop span:after { content: ""; position: absolute; /* 伪元素中是相对于 #toTop span 绝对定位 */ top: -5px; left: 8px; display: inline-block; width: 3px; height: 20px; background-color: #fff; border-radius: 3px; -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg);}
使用 css 代码生成的回到顶部按钮如下:
对于回到顶部的多种方法总结如下:
1. 锚标记
# 包含了一个位置信息,默认的锚是 #top 也就是网页的顶端。
方法:
1. 对回到顶部的按钮使用锚标记,即 a 标签,<a href="#top" title="回到顶部">回到顶部</a>
2. 在页面的顶部放置定位目标,<a name="top" id="top"></a>,这里的 name 属性和 id 属性的值比第一步骤中的 href 属性的值少一个 #,name 和 id 选择一个即可。
缺点:
会在地址栏里多出 # 符号。
2. JavaScript Scroll 事件:
<a href="javascript:scroll(0, 0)" title="返回顶部">返回顶部</a>
scroll(0, 0) 中第一个参数是相对于屏幕的水平位置,第二个参数是相对于屏幕的垂直位置。可调整其中任意一个值。
3. animate 缓慢回到顶部:
js:$(window).scroll(function () { if($(window).scrollTop()>=100) { $("#toTop").fadeIn(400); /* 当滑动到不小于 100px 时,回到顶部图标显示 */ }else { $("#toTop").fadeOut(400); /* 当滑动到小于(页面被卷去的高度) 100px 时,回到顶部图标隐藏 */ }});$("#toTop").click(function () { $("html, body").animate({scrollTop: 0}, 100); /* 持续时间为 100ms */ return false;});
有写错的地方,欢迎指正,不胜感激!笔者QQ群:148042812
阅读全文
0 0
- scrollTop回到顶部总结
- scrollTop回到顶部详解
- 回到顶部实例scrollTop
- 回到网页顶部的document.body.scrollTop与document.documentElement.scrollTop兼容问题
- JS回到顶部效果设计总结
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- “回到顶部”
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- 回到顶部
- 什么是自媒体淘客,自媒体淘客怎么赚钱
- iOS 08-线程通信
- 上传图片,实现图片预览
- poj 1743 不可重叠最长重复子串
- Struts(8)——OGNL与Struts结合的原理
- scrollTop回到顶部总结
- powerswsigner导入excel
- redis + centos 安装、启动
- Hibernate 入门案例(数据库链接,错误查看,已连数据库但不能自动创建表)
- MySQL:SQLyog的快捷键
- Kafka设计解析(四)- Kafka Consumer设计解析
- UNICODE 全志R16的tinav2.1系统增加opencv3.1.0的库的步骤2完成.txt(草稿)
- 数据结构Java实现06----中缀表达式转换为后缀表达式
- Qt国际化翻译小Demo