CSS-返回顶部代码
现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。
1.通过锚链接回到顶部,需要将body加入一个名为top的标记:
1
|
<a href= "#top" target= "_self" >回到顶部</a>
|
2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:
1
|
<a href= "javascript:scroll(0,0)" >JavaScript回到顶部<s/a>
|
3.通过JavaScript控制,缓慢向上滑动,不过不够平滑,代码参考如下:
1
|
<a onclick= "goScrollTop()" >JavaScript缓慢向上滑动</a>
|
1
2
3
4
5
6
7
8
9
10
11
|
function goScrollTop() {
//把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
//向上是负数,向下是正数
window.scrollBy(0, -100);
//延时递归调用,模拟滚动向上效果
scrolldelay = setTimeout( 'goScrollTop()' , 100);
//获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值
var sTop = document.documentElement.scrollTop + document.body.scrollTop;
//判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
if (sTop == 0) clearTimeout(scrolldelay);
}
|
4.当滚动条滚动到一定位置的时候显示,滚动条向上回滚的时候隐藏向上的回到顶部按钮,这种方式是最常用的方式:
1
2
3
|
<div class = "goTop" >
<span>Go</span>
</div>
|
jQuery代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function goTop(min_height) {
$( ".goTop" ).click(
function() {
$( 'html,body' ).animate({
scrollTop: 0
}, 700);
});
//获取页面的最小高度,无传入值则默认为600像素
min_height=min_height?min_height:400;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function() {
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if (s > min_height) {
$( ".goTop" ).fadeIn(100);
} else {
$( ".goTop" ).fadeOut(200);
}
});
}
$(function() {
goTop();
});
|
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//博客园-FlyElephant
.goTop {
height: 40px;
width: 40px;
background: red;
border-radius: 50px;
position: fixed ;
top: 90%;
right: 3%;
display: none;
}
.goTop span {
color: #fff;
position: absolute;
top: 12px;
left: 8px;
}
|
以上就是常用的样式,如有更好的方式,欢迎探讨~
本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5042463.html,如需转载请自行联系原作者
CSS-返回顶部代码相关推荐
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
- 网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
- 简单返回顶部代码及注释说明(转)
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
- 返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
- 隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
- JQ返回顶部代码分享~~~~
1.jq代码: <script type="text/javascript">$(function() {$("#tbox").click(scro ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html><head> ...
- 返回顶部酷炫小火箭发射代码
很酷炫哦,直接粘贴即可 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件_javascript技巧
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
最新文章
- Google Test(GTest)使用方法和源码解析——模板类测试技术分析和应用
- 苏宁“砍价团”高可用、高并发架构实践
- MySQL安装板多少钱_MySQL安装板怎么安装
- 小谈Online-game服务器端设计(1、2)
- Linux 查看命令
- mysql null 优化_MySQL如何优化IS NULL?
- 【渝粤教育】国家开放大学2018年春季 0047-21T计算机办公软件应用 参考试题
- 大写金额用计算机简单些,大写一到十怎么写 数字一到十的大写怎么写(开票用的大写)...
- linux格式化磁盘fdisk,linux下使用fdisk工具为磁盘分区格式化
- LHC有望揭示新的物理学理论
- 抖音挑战微信能赢么?
- 以史为鉴!美国如何摧毁了日本的芯片产业?
- 我跟OpenStack 1-8年,从ABC到HI、到KO
- JavaWeb 简易留言系统
- 新一代打包神器Walle(瓦力)使用小结
- GlobeLand30影像下载、去除黑边、镶嵌、裁剪、重分类
- python识别图片验证码,踩坑亲测
- HSV与HSI颜色空间的区别以及和RGB之间的转换
- 车牌识别一体机二次开发
- h5结合vant框架,实现列表上拉加载下拉刷新