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

  1. (function($){
  2. $.fn.survey=function(options){
  3. var defaults={width:"298",height:"207"};
  4. var options=$.extend(defaults,options);
  5. if($.browser.msie){
  6. var ieVersion=parseInt($.browser.version)}
  7. //建立HTML
  8. var __feedCreat=function(){
  9. var feedHtml=$('<div id="pubFeedBack"></div>');
  10. 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>');
  11. $("body").append(feedHtml);
  12. __ie6Fixed()
  13. };
  14. //绑定事件
  15. var __initEvent=function(){
  16. $(window).resize(function(){
  17. var winW=$(this).width();
  18. if(winW<=1124){$("#pubFeedBack").hide()}
  19. else{$("#pubFeedBack").show()}
  20. });
  21. $(window).bind("scroll",function(){
  22. if($(this).scrollTop()>50){
  23. $("#backTop").fadeIn().css({"display":"block"})
  24. }
  25. else{$("#backTop").fadeOut().css({"display":""})}
  26. });
  27. $("#backTop").bind("click",function(e){
  28. e.preventDefault();
  29. $("html,body").scrollTop(0)});
  30. };
  31. //回到顶部
  32. var __tip=function(type,tipText){
  33. var surveyTip=$("#D_SurveyTip"),surveyMask=$("#D_SurveyMask");
  34. if(!surveyTip||!surveyMask){return}
  35. surveyTip.removeClass("warning success").addClass(type).html(tipText);
  36. surveyMask.css("display","block");
  37. surveyTip.css("display","block");
  38. setTimeout(function(){
  39. surveyMask.css("display","none");                                                                                                                                                                                                                                                                                       surveyTip.css("display","none")},1000)
  40. };
  41. //ie6兼容
  42. var __ie6Fixed=function(){
  43. if(ieVersion!==6){return}
  44. var surveyBox=$("#D_SurveyBox");
  45. var pubFeedBack=$("#pubFeedBack");
  46. if(!surveyBox||!pubFeedBack)
  47. {
  48. return
  49. }
  50. $(window).bind("scroll",function(){
  51. var h=$(window).height(),st=$(window).scrollTop(),_top=h+st-options.height;                                                                                                                                                         var _top1=h+st-pubFeedBack.height()-15;surveyBox.css("top",_top+"px");
  52. pubFeedBack.css("top",_top1+"px")
  53. })
  54. };
  55. //开始执行
  56. if(screen.width>=1280)
  57. {
  58. (function(){
  59. __feedCreat();                                                                                                                                          __initEvent()                                                                                                                                                       })()
  60. }
  61. }
  62. })(jQuery);
  63. window.onerror=function(){return false};
  64. 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 回到顶部功能的更多相关文章

  1. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  2. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  3. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  4. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  5. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  6. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  7. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

随机推荐

  1. 仿京东左侧菜单 hover效果-简易demo

    简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托) .cont{display:inline-block;width:200px;height:200px;bord ...

  2. Facade - 外观模式

    1. 概述 外观模式,我们通过外观的包装,使应用程序只能看到外观对象,而不会看到具体的细节对象,这样无疑会降低应用程序的复杂度,并且提高了程序的可维护性.例子1:一个电源总开关可以控制四盏灯.一个风扇 ...

  3. 安装R语言的包的方法

    安装R语言的包的方法: 1. 在线安装 在R的控制台,输入类似install.packages("TSA")  # 安装 TSA install.packages("TS ...

  4. mysql InnoDB 的行锁

    表的引擎类型必须为InnoDB才可以进行此操作. 相关链接:http://www.cnblogs.com/CyLee/p/5579672.html 共享锁:单独运行前两句,然后新建一个会话使用第三句. ...

  5. 机器学习 Top 20 Python 开源项目

    转自:http://mp.weixin.qq.com/s?__biz=MzA4MjEyNTA5Mw==&mid=2652565022&idx=1&sn=9aa035097120 ...

  6. 统计学习方法:支撑向量机(SVM)

    作者:桂. 时间:2017-05-13  21:52:14 链接:http://www.cnblogs.com/xingshansi/p/6850684.html 前言 主要记录SVM的相关知识,参考 ...

  7. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  8. 基于Harbor和CephFS搭建高可用Private Registry

    我们有给客户搭建私有容器仓库的需求.开源的私有容器registry可供选择的不多,除了docker官方的distribution之外,比较知名的是VMware China出品的Harbor,我们选择了 ...

  9. codeblocks主题修改(vim)

    codeblocks的配置文件是default.conf,在Windows系统下,该文件在C:\Documents and Settings\Administrator\Application Dat ...

  10. 【转】hadoop2.6 配置lzo压缩

    [转自]http://my.oschina.net/u/1169079/blog/225070 经常用于处理大量的数据,如果期间的输出数据.中间数据能压缩存储,对系统的I/O性能会有提升.综合考虑压缩 ...