博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery javascript 回到顶部功能
阅读量:5267 次
发布时间:2019-06-14

本文共 2749 字,大约阅读时间需要 9 分钟。

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

 

 

 

[javascript] 
 
  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.οnerrοr=function(){
    return false};  
  79. if($.isFunction($(document).survey)){$(document).survey()}  

 

 

[css] 
 
  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;}  

转载于:https://www.cnblogs.com/xiaochao12345/p/4018259.html

你可能感兴趣的文章
PHP截取中英文混合字符
查看>>
电子眼抓拍大解密
查看>>
51nod1076 (边双连通)
查看>>
Linux pipe函数
查看>>
java equals 小记
查看>>
2019春 软件工程实践 助教总结
查看>>
Zerver是一个C#开发的Nginx+PHP+Mysql+memcached+redis绿色集成开发环境
查看>>
程序的静态链接,动态链接和装载 (补充)
查看>>
关于本博客说明
查看>>
Linux服务器在外地,如何用eclipse连接hdfs
查看>>
[Kaggle] Sentiment Analysis on Movie Reviews
查看>>
价值观
查看>>
mongodb命令----批量更改文档字段名
查看>>
MacOS copy图标shell脚本
查看>>
国外常见互联网盈利创新模式
查看>>
android 签名
查看>>
android:scaleType属性
查看>>
mysql-5.7 innodb 的并行任务调度详解
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>