文档章节

经典的回到页面顶端

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 180
阅读 6
收藏 1
点赞 0
评论 0

经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶端的小提示,可以很方便的滚动到顶端,省去鼠标滚动和拖动滚动条.直接贴代码(需引入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
用户收到"无法显示页面"的错误消息和"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
html 小于号为什么这么写,a标记的name属性 特殊用法

小于号为什么这么写? << 实体字符的写法规则由来: 一个字符实体(Character Entity)分成三部分: 第一部分是一个&符号,英文叫ampersand; 第二部分是实体(Entity)名字或者是#加上实体(Enti...

山下狮子
2014/03/25
0
2
关于a标签的链接跳转

欢迎您来访https://leezhang521.github.io a标签的javascript:void(0) (一) 在写页面的时候,点击链接,有两种情况,一种是跳转到另一个页面,一种是只有点击链接效果而没有产生跳转到另一个...

leeolady
2016/12/02
0
0
python 3.5 django 笔记(五)编辑文章

上一会已经使用了超链接功能 这回我们要给博客添加内容了 这是今天的效果图 1、 创建修改页面 在templates/blog下建立edit_page.html Edit Page

rExcHow
2017/06/09
0
0
程序员,杂草和大树,你选哪个

这篇文章的核心观点是:软件开发者只有打造顶端优势,才能获得更好的发展。 这样的感触,来自: 有位工作十来年的朋友,一直做开发,J2EE、C#、JavaScript、PHP、C++、Android、Python,很多...

foruok
2017/03/08
0
0
Selenium2+python自动化17-JS处理滚动条

前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了。 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的...

上海-悠悠
2016/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java的反射机制理解

一、概念说明 java的反射机制,是在运行状态下,可以动态获取任意一个类的属性和方法;可以动态调用一个对象任意方法; 二、反射相关类 java.lang.Class; //类 java.lang.re...

盼望明天
6分钟前
0
0
nginx反向代理-多端口映射

代码解释 1.1 http:www.baidu.test.com默认是80,访问“/”利用反向代理,然后访问本地8083; 1.2 8083代表本地的前端工程访问地址,前端需要访问后台数据,”/”,继续代理到后台地址9803; ...

lilugirl
8分钟前
0
0
Jfinal使用log4j2打印日志

1,添加maven配置 <properties><log4j2.version>2.11.0</log4j2.version><slf4j.version>1.7.25</slf4j.version></properties> <!--slf4j及log4j2日志 --><dependency> ......

iborder
8分钟前
0
0
如何在Rancher 2.0上快速部署Datadog

Datadog是一种流行的托管监控解决方案,用于聚合和分析分布式系统的指标和事件。从基础架构集成到协作仪表板,Datadog为用户提供了一个简洁的单一窗格视图,用户可以快速查看对其最重要的信息...

RancherLabs
11分钟前
0
0
Java示例演示Functor 和monad

This article was initially an appendix in our Reactive Programming with RxJavabook. However introduction to monads, albeit very much related to reactive programming, didn't suit......

Quan全
30分钟前
0
0
微信官方jssdk Demo

1.html部分 <!DOCTYPE html><!-- saved from url=(0028){sh:$selfUrl} --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"......

koloor
33分钟前
1
0
数据库命名规范

https://www.cnblogs.com/pangguoming/p/7126512.html 摘要:当前研发工作中经常出现因数据库表、数据库表字段格式不规则而影响开发进度的问题,在后续开发使用原来数据库表时,也会因为数据...

塔塔米
33分钟前
0
0
java https 请求工具类-通用

package com.ra.common.util; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintW......

轻量级赤影
34分钟前
0
0
MFC界面套包BCG Pro Edition for MFC正式发布v27.3|附下载

BCGControlBar Professional Edition for MFC是MFC的一个扩展库,您可以用来构建类似于Microsoft Office 2000/XP/2003/2007/2010/2013 和 Microsoft Visual Studio-like(打印、用户定制工具......

Miss_Hello_World
34分钟前
0
0
Spring Cloud云服务 - HongHu架构common-service 项目构建过程

上一篇我们介绍了《整合spring cloud云服务架构 - HongHu云架构common-service代码结构分析》,本节我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来...

itcloud
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部