文档章节

经典的回到页面顶端

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

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

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

gbin1
2013/03/26
460
1
用户收到"无法显示页面"的错误消息和"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
页面刷新后,回到页面底部

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

小猫王
2013/02/15
2.2K
8
移动端解决input获取焦点软键盘弹出影响定位的问题

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

愿爱无忧dk_
05/25
0
0
在Android手机上实现应用屏蔽

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

Cundong
2014/06/29
0
4

没有更多内容

加载失败,请刷新页面

加载更多

AI赋能一键自动检测:页面异常、控件异常、文本异常

摘要: 1.前言 闲鱼质量团队一直致力于交付高质量的app给用户,当前随着AI技术不断发展,TensorFlow大热,也给测试手段带来了更多种可能,本文接下来给大家介绍AI在闲鱼测试的一点实践:如何...

阿里云官方博客
18分钟前
0
0
Microsoft Remote Desktop For Mac

地址:https://rink.hockeyapp.net/apps/5e0c144289a51fca2d3bfa39ce7f2b06/ 解决国内App store不能下载的问题。

Cheuker
29分钟前
0
0
原地打印刷新(倒计时)

原地打印刷新(倒计时) 代码如下 from time import sleepfor i in reversed(range(1, 11)): print("\r倒计时:{}秒".format(i), end="") sleep(1)...

_Change_
41分钟前
0
0
php,vue,vue-ssr 做出来的页面有什么区别?

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏 目前我这边的web页面,都是采用php+smarty模板生成的,是一种比较早期的开发模式。好处是没...

腾讯云加社区
47分钟前
1
0
安卓的切图规范

Android UI 切图命名规范、标注规范及单位描述 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的。IOS我这边暂不作讲解,因为我本人也不是开发IOS。这里整理一下我在Android...

mo311
52分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部