源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery 实现返回顶部功能

  • 时间:2020-10-15 20:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery 实现返回顶部功能
今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! [img]http://files.jb51.net/file_images/article/201411/2014111714181334.png[/img] [img]http://files.jb51.net/file_images/article/201411/2014111714181435.png[/img]
[url=#top]     $("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()} 
代码很简单,各位直接拿去,放在自己项目中即可,如有bug请给我留言,共同完善 [b]方法二:[/b] 主要参数: 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'
});
});
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部