jquery 实现返回顶部功能

前端之家收集整理的这篇文章主要介绍了jquery 实现返回顶部功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相!

代码如下:
502_349@Creat=function(){ var @R_502_349@Html=$('
502_349@Back">
'); @R_502_349@Html.html('\u8fd4\u56de\u9876\u90e8\u610f\u89c1\u53cd\u9988'); $("body").append(@R_502_349@Html); __ie6Fixed() }; //绑定事件 var __initEvent=function(){ $(window).resize(function(){ var winW=$(this).width(); if(winW<=1124){$("#pubFeedBack").hide()} else{$("#pubFeedBack").show()} }); $(window).bind("scroll",function(){ if($(this).scrollTop()>50){ $("#backTop").fadeIn().css({"display":"block"}) } else{$("#backTop").fadeOut().css({"display":""})} }); $("#backTop").bind("click",function(e){ e.preventDefault(); $("html,body").scrollTop(0)}); }; //回到顶部 var __tip=function(type,tipText){ var surveyTip=$("#D_SurveyTip"),surveyMask=$("#D_SurveyMask"); if(!surveyTip||!surveyMask){return} surveyTip.removeClass("warning success").addClass(type).html(tipText); surveyMask.css("display","block"); surveyTip.css("display","block"); setTimeout(function(){ surveyMask.css("display","none"); surveyTip.css("display","none")},1000) }; //ie6兼容 var __ie6Fixed=function(){ if(ieVersion!==6){return} var surveyBox=$("#D_SurveyBox"); var pub@R_502_349@Back=$("#pub@R_502_349@Back"); if(!surveyBox||!pub@R_502_349@Back) { return } $(window).bind("scroll",function(){ var h=$(window).height(),st=$(window).scrollTop(),_top=h+st-options.height; var _top1=h+st-pub@R_502_349@Back.height()-15;surveyBox.css("top",_top+"px"); pub@R_502_349@Back.css("top",_top1+"px") }) }; //开始执行 if(screen.width>=1280) { (function(){ __@R_502_349@Creat(); __initEvent() })() } } })(jQuery); window.onerror=function(){return false}; if($.isFunction($(document).survey)){$(document).survey()}

代码如下:
502_349@Back{position:fixed;_position:absolute;right:15px;bottom:15px;width:54px;font-size:12px;} #backTop,#callSurvey{display:block;width:52px;padding:1px;height:56px;line-height:22px;text-align:center;color:#fff;text-decoration:none;} #backTop{display:none;background:#999;} #backTop:hover{background:#ccc;zoom:1;text-decoration:none;color:#fff;} #backTop i{display:block;width:25px;height:13px;margin:14px auto 8px;background-position:-63px 0;} #callSurvey{margin-top:1px;background:#3687d9;} #callSurvey:hover{background:#66a4e3;zoom:1;text-decoration:none;color:#fff;} #callSurvey i{display:block;width:26px;height:25px;margin:9px auto 0;background-position:0 0;} #callSurvey:hover i{background-position:-30px 0;}

代码很简单,各位直接拿去,放在自己项目中即可,如有bug请给我留言,共同完善

方法二:

主要参数: scrollName: 'scrollUp',// Element ID topDistance: '300',// Distance from top before showing element (px) topSpeed: 300,// Speed back to top (ms) animation: 'fade',// Fade,slide,none animationInSpeed: 200,// Animation in speed (ms) animationOutSpeed: 200,// Animation out speed (ms) scrollText: 'Scroll to top',// Text for element activeOverlay: false, // 帮助定位“回到顶端”按钮出现时滚动到的页面位置。

jquery代码(ScrollUp.js):

原文链接:/jquery/57289.html

猜你在找的jQuery相关文章