Posted in Javascript onNovember 17, 2014
今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相!
(function($){ $.fn.survey=function(options){ var defaults={width:"298",height:"207"}; var options=$.extend(defaults,options); if($.browser.msie){ var ieVersion=parseInt($.browser.version)} //建立HTML var __feedCreat=function(){ var feedHtml=$('<div id="pubFeedBack"></div>'); 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>'); $("body").append(feedHtml); __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 pubFeedBack=$("#pubFeedBack"); if(!surveyBox||!pubFeedBack) { return } $(window).bind("scroll",function(){ var h=$(window).height(),st=$(window).scrollTop(),_top=h+st-options.height; var _top1=h+st-pubFeedBack.height()-15;surveyBox.css("top",_top+"px"); pubFeedBack.css("top",_top1+"px") }) }; //开始执行 if(screen.width>=1280) { (function(){ __feedCreat(); __initEvent() })() } } })(jQuery); window.onerror=function(){return false}; if($.isFunction($(document).survey)){$(document).survey()}
#backTop i,#callSurvey i{background:url(survey.png) no-repeat;} #pubFeedBack{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):
$(function () { $.scrollUp({ 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, // set css color to display scrollup active point, e.g '#00ffff' }); });
jquery 实现返回顶部功能
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@