码迷,mamicode.com
首页 > 编程语言 > 详细

jquery javascript 回到顶部功能

时间:2014-10-11 10:31:25      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:blog   http   color   io   os   ar   java   strong   sp   

今天搞了一个回到顶部的JS JQ功能

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

[javascript] view plaincopyprint?
 
  1. (function($){       
  2. $.fn.survey=function(options){  
  3.   
  4. var defaults={width:"298",height:"207"};  
  5.       
  6. var options=$.extend(defaults,options);  
  7.       
  8.     if($.browser.msie){  
  9.     var ieVersion=parseInt($.browser.version)}  
  10.       
  11. //建立HTML  
  12. var __feedCreat=function(){  
  13.     var feedHtml=$(‘<div id="pubFeedBack"></div>‘);  
  14.     feedHtml.html(‘<a href="#top" id="backTop"><i></i>\u8fd4\u56de\u9876\u90e8</a><a href="#" id="callSurvey"><i></i>\u610f\u89c1\u53cd\u9988</a>‘);  
  15.     $("body").append(feedHtml);  
  16.     __ie6Fixed()  
  17.     };  
  18.       
  19. //绑定事件  
  20. var __initEvent=function(){  
  21.     $(window).resize(function(){  
  22.     var winW=$(this).width();  
  23.     if(winW<=1124){$("#pubFeedBack").hide()}  
  24.     else{$("#pubFeedBack").show()}  
  25.     });  
  26.       
  27.     $(window).bind("scroll",function(){  
  28.     if($(this).scrollTop()>50){  
  29.     $("#backTop").fadeIn().css({"display":"block"})  
  30.     }  
  31.     else{$("#backTop").fadeOut().css({"display":""})}  
  32.     });  
  33.       
  34.       
  35.       
  36.     $("#backTop").bind("click",function(e){  
  37.     e.preventDefault();                               
  38.     $("html,body").scrollTop(0)});  
  39. };  
  40.   
  41. //回到顶部  
  42. var __tip=function(type,tipText){  
  43. var surveyTip=$("#D_SurveyTip"),surveyMask=$("#D_SurveyMask");  
  44. if(!surveyTip||!surveyMask){return}  
  45. surveyTip.removeClass("warning success").addClass(type).html(tipText);  
  46. surveyMask.css("display","block");  
  47. surveyTip.css("display","block");  
  48. setTimeout(function(){  
  49. surveyMask.css("display","none");                                                                                                                                                                                                                                                                                       surveyTip.css("display","none")},1000)  
  50. };  
  51.   
  52.   
  53. //ie6兼容  
  54. var __ie6Fixed=function(){    
  55.     if(ieVersion!==6){return}  
  56.     var surveyBox=$("#D_SurveyBox");  
  57.     var pubFeedBack=$("#pubFeedBack");  
  58.     if(!surveyBox||!pubFeedBack)  
  59.     {  
  60.         return  
  61.     }  
  62.     $(window).bind("scroll",function(){  
  63.     var h=$(window).height(),st=$(window).scrollTop(),_top=h+st-options.height;                                                                                                                                                         var _top1=h+st-pubFeedBack.height()-15;surveyBox.css("top",_top+"px");  
  64.     pubFeedBack.css("top",_top1+"px")  
  65.     })  
  66. };  
  67.   
  68.   
  69. //开始执行  
  70. if(screen.width>=1280)  
  71. {  
  72.     (function(){  
  73.     __feedCreat();                                                                                                                                          __initEvent()                                                                                                                                                       })()  
  74. }  
  75. }  
  76. })(jQuery);  
  77.   
  78. window.onerror=function(){return false};  
  79. if($.isFunction($(document).survey)){$(document).survey()}  

 

 

  1. #backTop i,#callSurvey i{background:url(survey.png) no-repeat;}  
  2. #pubFeedBack{position:fixed;_position:absolute;right:15px;bottom:15px;width:54px;font-size:12px;}  
  3. #backTop,#callSurvey{display:block;width:52px;padding:1px;height:56px;line-height:22px;text-align:center;color:#fff;text-decoration:none;}  
  4. #backTop{display:none;background:#999;}  
  5. #backTop:hover{background:#ccc;zoom:1;text-decoration:none;color:#fff;}  
  6. #backTop i{display:block;width:25px;height:13px;margin:14px auto 8px;background-position:-63px 0;}  
  7. #callSurvey{margin-top:1px;background:#3687d9;}  
  8. #callSurvey:hover{background:#66a4e3;zoom:1;text-decoration:none;color:#fff;}  
  9. #callSurvey i{display:block;width:26px;height:25px;margin:9px auto 0;background-position:0 0;}  
  10. #callSurvey:hover i{background-position:-30px 0;}  

jquery javascript 回到顶部功能

标签:blog   http   color   io   os   ar   java   strong   sp   

原文地址:http://www.cnblogs.com/xiaochao12345/p/4018259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!