文档章节

经典的回到页面顶端

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 180
阅读 7
收藏 1

经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶端的小提示,可以很方便的滚动到顶端,省去鼠标滚动和拖动滚动条.直接贴代码(需引入jQuery.js):

JS:

 

$(function(){
	// 滚动窗口来判断按钮显示或隐藏
	$(window).scroll(function() {
		if ($(this).scrollTop() > 150) {
			$('.back-to-top').fadeIn(100);
		} else {
			$('.back-to-top').fadeOut(100);
		}
	});
	
	// jQuery实现动画滚动
	$('.back-to-top').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop: 0}, 500);
	})
})

 CSS:

 

<style type="text/css">
	.back-to-top:hover {
		background-color: rgba(0, 0, 0, 0.3);
	}
	.back-to-top {
		position: fixed;
		bottom: 3em;
		right: 3em;
		text-decoration: none;
		color: #EEEEEE;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 12px;
		padding: 1em;
		display: none;
		border-radius: 3px;
		border: 1px solid #CCCCCC;
	}
</style>

 HTML:

 

<footer>
	<hr>
	<a href="#" class="back-to-top" style="display: inline;">回到顶端</a>
</footer>

 

本文转载自:http://lgscofield.iteye.com/blog/1853436

共有 人打赏支持
lgscofield

lgscofield

粉丝 23
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
开发小技巧:超简单的“回到顶端”按钮实现

日期:2013-3-26 来源:GBin1.com 在线演示 之前的文章中我们曾发表过另外一个back to top的插件 : jQuery Back to Top,喜欢的朋友可以点击来看。 今天我们介绍的这篇web开发小技巧将使用j...

gbin1
2013/03/26
522
1
【悬赏详情,评论,报名,审核,发送简历】测试

1. 未登录情况下“引用评论回复”控制台js报错 1. 未登录情况下,悬赏详情中的附件可以下载 2. 悬赏首页点击悬赏内容,当前页面跳转,同时会新开一个页面 3. 悬赏评论里@人之后,众包页面没有...

Lailysh
2015/07/27
0
4
页面刷新后,回到页面底部

我文章的评论是用jquery 的ajax提交的;当初用ajax提交只是为了避免用户刷新页面重复提交表单; 如果提交成功后,我用window.location.reload(true)刷新页面来显示刚才提交的数据,但是这样刷...

小猫王
2013/02/15
2.3K
8
用户收到"无法显示页面"的错误消息和"Connections_refused"条目记录在运行 Win

症状 您会遇到下列症状在运行 Microsoft Windows Server 2003、 Microsoft Exchange Server 2003年和 Microsoft Internet Information Services (IIS) 6.0 的服务器上: 当用户尝试使用 Micr......

mickelfeng
2014/01/23
0
0
移动端解决input获取焦点软键盘弹出影响定位的问题

这是刚做前端时候写的文章,拿到简书上做记录吧!以免以后再遇到这样的坑。 在最近的一次H5页面开发中,发现在安卓端点击输入框的时候虚拟键盘会把最下边的‘保存’按钮顶上去。 在试了很多方...

愿爱无忧dk_
2018/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
1
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
2
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
3
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
3
0
深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部