今天搞了一个回到顶部的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. ios学习之旅--oc对象的关系

    1.匿名对象:就是没有名字对象     1.匿名对象仅用一次     使用场景:     1.当我们仅仅要调用一个对象的某个方法一次的时候能够使用匿名对象 2.匿名对象能够作为函数的实际參数 #imp ...

  2. Java+Oracle实现事务——JDBC事务

    J2EE支持JDBC事务.JTA事务和容器事务事务,这里说一下怎样实现JDBC事务. JDBC事务是由Connection对象所控制的,它提供了两种事务模式:自己主动提交和手动提交,默认是自己主动提交 ...

  3. activiti自己定义流程之Spring整合activiti-modeler实例(一):环境搭建

    项目中须要整合activiti-modeler自己定义流程,找了非常多资料后,最终成功的跳转到activiti-modeler流程设计界面.下面是记录: 一.整合基础:eclipse4.4.1.tom ...

  4. 【Android】3.12 兴趣点( POI)搜索功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 POI(Point of Interest),中文可以翻译为“兴趣点”.在地理信息系统中,一个POI ...

  5. Rewrite MSIL Code on the Fly with the .NET Framework Profiling API

    http://clrprofiler.codeplex.com/ http://blogs.msdn.com/b/davbr/archive/2012/11/19/clrprofiler-4-5-re ...

  6. singer页左侧滚动的时候右侧跟随高亮显示

    1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...

  7. Ribbon的配置

    1.注解配置 @RibbonClient(name = "xxx",configuration = XxxRibbonConfig.class) public class XxxR ...

  8. 自己写bootloader(一)

    bootloader功能目标:启动内核1.从Flash上把内核读入内存  1>读Flash:    a.NORFLASH:读内存    b.NANDFLASH:  2>初始化内存(SDRA ...

  9. JAVA中的protected(详解),以及和clone()方法有关的一些问题

    http://blog.csdn.net/ciawow/article/details/8262609 ************************************************ ...

  10. C#中通过Coded UI Test Web Page初体验(图文并茂,去繁就简!亲测通过哦~)

    今天首次按照网上的步骤进行Coded UI测试,终于测试通过了,我这次进行的自动化测试是:打开浏览器,输入www.baidu.com,然后输入lty,然后点击页面中第一条数据的左侧位置(为了能获取到T ...