网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
Jquery实现置顶和置底特效
作者:
邓剑彬
/ 发布于
2012/8/3
/
678
Jquery实现置顶和置底特效是一款非常实用的效果,当你网站的内容多的时候,它就可以用上场了,有了它之后你就不用滚动你的鼠标就可以实让页面的滚动条滚动到顶部和底部
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery实现置顶和置底特效 - Jquery-school</title> <meta name="author" content="Jquery-School" /> <meta name="Copyright" content="Jquery-School,www.jq-school.com" /> <meta name="keywords" content="Jquery,Jquery资源,前端设计,div+css" /> <meta name="description" content="JquerySchool是一个专门分享jquery资源、插件、特效的一个网站,完全开放源代码,把实际开发中应用最多、最实用的Jquery资源抽取出来再加以精心编排,让广大网友能以最短的时间、花最少的精力去真正掌握jQuery开发的知识。" /> <script type="text/javascript" src="<a href="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script">http://www.jq-school.com/js/jquery-1.7.2.min.js"></script</a>> <script type="text/javascript"> $(function(){ $("#updown").css("top",window.screen.availHeight/2-100+"px"); $(window).scroll(function() { if($(window).scrollTop() >= 100){ $('#updown').fadeIn(300); }else{ $('#updown').fadeOut(300); } }); $('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#updown .down').click(function(){$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);}); }); </script> <style type="text/css"> <!-- *{padding:0; margin:0} body{height:3000px;} #updown{ _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1)); position: fixed; _position: absolute; top: 200px; right: 30px; display: none; } #updown span{ cursor:pointer; width:48px; height:50px; display:block; } #updown .up{ background:url(images/updown.png) no-repeat; } #updown .up:hover{ background:url(images/updown.png) top right no-repeat; } #updown .down{ background:url(images/updown.png) bottom left no-repeat; } #updown .down:hover{ background:url(images/updown.png) bottom right no-repeat; } <div>a{text-decoration:none;outline:none; color:#666666;} a:hover{text-decoration:none} img{border:0} ul{list-style:none;margin:0;} h2{ color:#6CBD45; font-size:14px; font-weight:bold; padding-bottom:0.5em; margin:0; } <div>h3{ font-size:13px; font-weight:bold; } #meun{color:#fff; padding-left:10px;} #meun img{ float:left;} #submeun{ margin-left:70px; float:left;} #submeun li{ text-align:center; margin-right:10px; float:left; display:inline;} #submeun li a{ color:#fff;height:50px; line-height:50px; font-size:14px; font-weight:bold; text-align:center; padding-left:15px; padding-right:15px;display:block;} #submeun li.cur{ text-align:center; background:#82ce18; margin-right:10px;float:left; display:inline;} #top{ background-color:#000; margin: 0em 0 10px 0em;</div> <div>border-style:solid; border-width:1px; border-color:#E5E5E5; height:50px; line-height:50px; } h2.subtitle{ font-size:13px; float:right; color:#6CBD45; margin:0 10px; text-align:right; } <div>h1.title{ height:50px; font-size:12px; background:url(logo.png) no-repeat; } h1.title a:link,h1.title a:visited,h1.title a:hover{ color:#000; text-decoration:none; } --> </style> </head> <body> <div id="top"> <h2 class="subtitle"> JQuery让你的前端设计更精彩!</h2> <div id="meun"><a href="<a href="http://www.jq-school.com/">http://www.jq-school.com/</a>" title="Jquery-School"><img src="<a href="http://www.jq-school.com/logo.png">http://www.jq-school.com/logo.png</a>" /></a> <ul id="submeun"> <li><a href="<a href="http://www.jq-school.com/">http://www.jq-school.com/</a>">首 页</a></li> <li class="cur"><a href="javascript:void(0)">Jquery实现置顶和置底特效</a></li> </ul> </div> </div> <div id="updown"><span class="up"></span><span class="down"></span></div> </body> </html> </div>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
置顶和置底特效
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
.
实现对图片上传的接收
.
判断用户输入的是否为IP地址
邓剑彬
贡献的其它代码
(
5
)
.
右侧在线QQ客服+手风琴特效
.
Jquery实现叠层3D文字特效
.
Jquery实现瀑布流特效
.
jquery时间插件
.
Jquery实现置顶和置底特效
地图
本站
我们
服务
版权
联系
回馈
博客