文档章节

经典的回到页面顶端

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

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

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

gbin1
2013/03/26
460
1
页面刷新后,回到页面底部

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

小猫王
2013/02/15
2.2K
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_
05/25
0
0
在Android手机上实现应用屏蔽

在Android手机上,很多App都实现了应用屏蔽功能。比如,360手机卫士可以在用户启动其他应用程序的时候弹出一个验证窗口来实现应用程序的加密,「我要当学霸」、「我要早睡」、「番茄土豆」可...

Cundong
2014/06/29
0
4

没有更多内容

加载失败,请刷新页面

加载更多

play framework 如何支持多数据源

有段时间没有写博客了,但今天又写一篇了,主要是因为这事有一丝自己的思考和动手实践,所以就记录下来了。 现有的问题: play 1.2.4 两台数据库服务器,但是play1.2.4 并不支持同时连接两台...

tuerqidi
29分钟前
2
0
Mysql only_full_group_by解析

查看当前数据库模式: select @@sql_mode; 原因: mysql 5.7中的sql_mode的值中包含'ONLY_FULL_GROUP_BY'; 处理:执行以下SQL set GLOBAL sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,N......

年轻的中年大叔
31分钟前
1
0
防止表单重复提交

1:前端方式(治标不治本) $("#admin-role-save").click(function(){//admin-role-save为submit的idvar ts=$(this);var ts_old_val=ts.val();ts.val("提交中....");ts.att...

uug
31分钟前
1
0
保持屏幕常亮

getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); 在act的created方法中调用即可,一般是播放视频的时候......

Carbenson
31分钟前
1
0
智能合约实施指南

与区块链技术一样,智能合约在商业领域也非常有价值。 为了让我们的读者彻底了解智能合约是什么以及它们如何影响现代商业的交易方式,我们准备了本指南。 集中商业模式正在给去中心化的模式让...

geek12345
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部