jquery 实现返回顶部功能
jquery 实现返回顶部功能
发布时间:2016-12-30 来源:查字典编辑
摘要:今天搞了一个回到顶部的JSJQ功能,废话不多说,有图有真相!复制代码代码如下:(function($){$.fn.survey=functi...

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

jquery 实现返回顶部功能1

jquery 实现返回顶部功能2

复制代码 代码如下:

(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>u8fd4u56deu9876u90e8</a><a href="#" id="callSurvey"><i></i>u610fu89c1u53cdu9988</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' }); });

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类