php实现返回顶部,jquery 实现返回顶部功能_jquery

今天搞了一个回到顶部的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=$('

');

feedHtml.html('\u8fd4\u56de\u9876\u90e8\u610f\u89c1\u53cd\u9988');

$("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.οnerrοr=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'

});

});

本文原创发布php中文网，转载请注明出处，感谢您的尊重！