Heim > Web-Frontend > js-Tutorial > jquery implementiert return to top function_jquery

jquery implementiert return to top function_jquery

WBOY
Freigeben: 2016-05-16 16:31:05
Original
1674 Leute haben es durchsucht

Heute habe ich eine JS-JQ-Funktion erstellt, die nach oben zurückkehrt. Kein Unsinn mehr, es gibt Bilder und die Wahrheit!

Code kopieren Der Code lautet wie folgt:

(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('u8fd4u56deu9876u90e8 u610fu89c1u53cdu9988'); 
    $("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("Erfolgswarnung").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) 
    { 
        zurück 
    } 
    $(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;} 

Der Code ist sehr einfach. Sie können ihn einfach in Ihr eigenes Projekt einfügen. Wenn Sie Fehler haben, hinterlassen Sie mir bitte eine Nachricht und wir können ihn gemeinsam verbessern.

Methode 2:

Hauptparameter:
scrollName: 'scrollUp', // Element-ID
topDistance: '300', // Abstand von oben vor der Anzeige des Elements (px)
topSpeed: 300, // Geschwindigkeit zurück nach oben (ms)
Animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in Geschwindigkeit (ms)
animationOutSpeed: 200, // Animationsausgangsgeschwindigkeit (ms)
scrollText: 'Nach oben scrollen', // Text für Element
activeOverlay: false,
// Hilft dabei, die Seitenposition zu finden, zu der gescrollt werden soll, wenn die Schaltfläche „Zurück nach oben“ angezeigt wird.

JQuery-Code (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'
});
});
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage