收藏了三jQuery返回顶部特效代码
2013-09-05 20:24
260 查看
返回顶部是我们经常会在很多网站中看到这种效果,如新浪网,淘宝网都可以看到有返回顶部效果,这样方便用户提升了网站用户体验了。
仿新浪网“返回顶部”效果
实例
该效果集结了返回底部、返回顶部、网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了
<title>jQuery返回顶部特效 </title> </head> <body> <style type="text/css"> /*返回顶部*/ #roll_top {position:relative; margin-bottom:1px;cursor:pointer;height:60px;width:60px;display:block;background:#ddd;} #roll_top:hover {background:#666;} #roll {width:60px;position:fixed;right:30px;bottom:50px; _position:absolute; _margin-top:300px; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-40-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); } </style> <p align="right"> </p> <div id="roll"> </i> <a title="回顶部" id="roll_top" href="javascript:;" style="display: block; "></a> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ /*返回顶部与找客服*/ var jq=jQuery; jq('#roll_top').hide(); jq(window).scroll(function () { if (jq(window).scrollTop() > 0) { jq('#roll_top').fadeIn(400);//当滑动栏向下滑动时,按钮渐现的时间 } else { jq('#roll_top').fadeOut(200);//当页面回到顶部第一屏时,按钮渐隐的时间 } }); jq('#roll_top').click(function () { jq('html,body').animate({ scrollTop : '0px' }, 200);//返回顶部所用的时间 }); }); </script>实例
仿新浪网“返回顶部”效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿新浪网“返回顶部”效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); } </style> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> </head> <body> <p>如果预览时左下角提示错误,<font color=red>请先刷新一下本页面</font>就可以看到效果了。</p> <p> 拖动滚动条到页面底部就会显示“返回顶部”按钮。</p> <p> 更多代码请访问:<a href="http://www.php100.com/" target="_blank">网页***教程</a></p> <p></p> <div style="height:2000px;"></div> <script type="text/javascript"> (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); </script> </body> </html>
实例
该效果集结了返回底部、返回顶部、网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>特效加工厂</title> <script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script> <style type="text/css"> body { margin:0; padding:0; font-size:12px; } #main { width:910px; margin:0 auto; height:2000px; } .go{width:47px;height:106px;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));right:12px;bottom:25%; background-image:url("/jscss/demoimg/201208/tobg.png"); background-repeat:no-repeat;} .go a{background:url(/jscss/demoimg/201208/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left; cursor:pointer;} .go .top{background-position:0 0px;height:22px} .go .feedback{background-position:0 -22px;height:32px} .go .bottom{background-position:0 -55px;height:22px} .go .top:hover{background-position:-38px -0px} .go .feedback:hover{background-position:-38px -22px} .go .bottom:hover{background-position:-38px -55px} </style> <script type="text/javascript"> $(function () { $(".top").click(//定义返回顶部点击向上滚动的动画 function () { $('html,body').animate({ scrollTop: 0 }, 700); }); $(".bottom").click(//定义返回顶部点击向上滚动的动画 function () { $('html,body').animate({ scrollTop: document.body.clientHeight }, 700); }); }) </script> </head> <body> <div id="main"> <div class="go"> <a title="返回顶部" class="top"></a> <a title="如果您有意见,请反馈给我们!" class="feedback" href="/guestbook/" target="_blank"></a> <a title="返回底部" class="bottom" ></a> </div> </div> </body> </html>
相关文章推荐
- jQuery实现的个性化返回底部与返回顶部特效代码
- jQuery实现的个性化返回底部与返回顶部特效代码
- 弹性返回顶部代码
- 一行代码搞定使用LinearLayoutManager一键返回顶部
- 简单返回顶部代码及注释说明
- css 简单 返回顶部 代码及注释说明
- javascript返回顶部几种代码总结
- [置顶] 【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。
- Html 返回顶部代码及注释说明
- jquery实现的动态回到顶部特效代码
- js返回顶部代码
- javascript返回顶部效果(自写代码)
- vue项目tween方法实现返回顶部的示例代码
- CSS-返回顶部代码
- 简单的弹性返回顶部JS代码
- 基于JQ返回顶部代码
- 生活中的“返回顶部”原来代码这么简单,一个锚点链接(超链接{a}里的一种)就搞定!
- 兼容IE6的返回顶部代码
- ECSHOP 返回顶部代码
- 返回顶部隐藏显示的控制代码