【转】用jquery编写动态的返回顶部特效
jquery代码:
function gotoTop(min_height){
//预定义返回顶部的html代码,它的css样式默认为不显示
var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
//将返回顶部的html代码插入页面上id为page的元素的末尾
$("#page").append(gotoTop_html);
$("#gotoTop").click(//定义返回顶部点击向上滚动的动画
function(){$('html,body').animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");
});
//获取页面的最小高度,无传入值则默认为600像素
min_height ? min_height = min_height : min_height = 600;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
gotoTop();
css代码:
/*默认样式,主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
html代码:
<a href='' onclick="gotoTop()">TOP</a>
【转】用jquery编写动态的返回顶部特效的更多相关文章
- JavaScript返回顶部特效
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...
- jQuery 一句代码返回顶部
兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="po ...
- jQuery类级别插件--返回顶部,底部,去到任何部位
先引入js:<script type="text/javascript" src="jquery.js" ></script><s ...
- 使用jquery构建Metro style 返回顶部
个人一直对metro风格的东西情有独钟,偶然间在腾讯网看到一款小插件,蓝色Metro风格的,所以决定把它放到我的博客中,这样做应该不会有版权问题吧orz.. Complete code 后言 我把他原 ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- WEB前端--返回顶部特效源码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 原生js实现返回顶部特效
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- JDBC+XML+DOM4J
利用xml文件封装数据库配置信息xml文件放在src目录下/testjdbc1/src/DBUtil.xml <?xml version="1.0" encoding=&qu ...
- iOS设备,fixed布局出问题
window.deviceId = '{{$deviceId}}'; window.iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? t ...
- javaweb项目数据库中数据乱码
javaweb项目数据库中数据乱码 first: 排查原因: 打断点,查看到底是在执行存数据库操作之前就已经乱码了,还是存数据库操作后乱码的. 前者解决方案: 在web.xml里面加上: <fi ...
- python compileall 打包发布
Python工程的编译.合并.打包.发布 from:https://my.oschina.net/bfbd/blog/864310 确保要发布的包(demo)的根目录中有__main__.py文件 ...
- [noip模拟赛]小U的女装
https://www.zybuluo.com/ysner/note/1329304 题面 有一张\(n\)点\(m\)边的.不一定联通的无向图. 如果选了一条边,就不能选其两个端点. 现在同时选点和 ...
- COLORREF
COLORREF含义及在VC++中的使用 转载 原创 2016年03月11日 23:40:19 4019 所谓真彩色是指显示出来的图像的颜色与真实世界中的颜色非常自然逼真,使得人眼难以区分它们之间的差 ...
- 数据库无法访问,用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法
问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...
- Linux 系统管理命令 - iftop - 动态显示网络接口流量信息
命令详解 重要星级: ★★★★☆ 功能说明: iftop 是一款实时流量监控工具,可用于监控 TCP/IP 连接等,必须以 root 用户的身份运行.一般最小化安装系统是没有这个命令的,需要使用 yu ...
- 4 Java 如何判定是否存活或者死亡
在堆中存放着几乎所有的对象实例,垃圾收集器在对堆进行回收前,第一件事就是要确定这些对象之中哪些还活着,哪些对象已经死去. 判断对象是否已经死亡有以下几种算法: 引用计数法算法 定义 : 给对象中添加一 ...
- 浅谈算法——线段树之Lazy标记
一.前言 前面我们已经知道线段树能够进行单点修改和区间查询操作(基本线段树).那么如果需要修改的是一个区间该怎么办呢?如果是暴力修改到叶子节点,复杂度即为\(O(nlog n)\),显然是十分不优秀的 ...