【转】用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插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- bzoj1560: [JSOI2009]火星藏宝图
考虑到一个性质,A到B的距离一定不小于A到C再到B的距离,因为能够到达这三个点不可能构成锐角三角形 对于当前点的更新只需要找那些无法经过其它点再到当前点的点,相当于是一个y坐标单调减的上凸包,随便维护 ...
- YTU 2892: I--免费看电影
2892: I--免费看电影 时间限制: 1 Sec 内存限制: 128 MB 提交: 30 解决: 12 题目描述 万象城星美影院开业1周年了,要举行为期一天的大酬宾,ACM队员准备去看电影.已 ...
- Linux服务器性能问题
如何快速分析出现性能问题的Linux服务器 https://www.cnblogs.com/leixiaobai/category/1246164.html Brendan Gregg曾经分享过当遇到 ...
- bzoj4033 [HAOI2015]树上染色——树形DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4033 树形DP,状态中加入 x 与父亲之间的边的贡献: 边权竟然是long long... ...
- 05_传智播客iOS视频教程_第一个OC程序
Cocoa Application开发的是带界面的程序. OC是完全兼容C语言的,但是C语言里面是不能写OC的东西的. OC和C的第一个区别,就是源文件的后缀名的区别.OC程序的源文件的后缀名是.m, ...
- Centos6可以ping通但浏览器不能上网(解决)
遇到这种情况,只需要修改一下DNS Server即可,如下图. 这样再试试,应该可以了吧-
- Ruby Hash类
Hash类 更新:2017/06/15 获取没有的哈希值时返回nil 更新:2018/01/03 增加merge! 更新: 2018/04/05 增加搜索 key 更新: 2018/04/30 增加e ...
- bzoj 1195: [HNOI2006]最短母串【状压dp】
我有病吧--明明直接枚举是否匹配就可以非要写hash,然后果然冲突了(--我个非酋居然还敢用hash 设f[s][i]为已选串状态为s并且最后一个串是i,还有预处理出g[i][j]表示最长有长为g[i ...
- bzoj 2111: [ZJOI2010]Perm 排列计数【树形dp+lucas】
是我想复杂了 首先发现大于关系构成了一棵二叉树的结构,于是树形dp 设f[i]为i点的方案数,si[i]为i点的子树大小,递推式是\( f[i]=f[i*2]*f[i*2+1]*C_{si[i]-1} ...
- bzoj 1006: [HNOI2008]神奇的国度【弦图+LesBFS】
参考论文:https://wenku.baidu.com/view/6f9f2223dd36a32d73758126.html 参考代码:http://hzwer.com/3500.html 虽然会写 ...