Home > Web Front-end > JS Tutorial > body text

jquery implements return to top function_jquery

WBOY
Release: 2016-05-16 16:31:05
Original
1636 people have browsed it

Today I built a JS JQ function that returns to the top. No more nonsense, there are pictures and the truth!

Copy code The code is as follows:

(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('u8fd4u56deu9876u90e8u610fu89c1u53cdu9988'); 
    $("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;} 

The code is very simple. You can just take it and put it in your own project. If you have any bugs, please leave me a message and we can improve it together

Method 2:

Main parameters:
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,
// Helps locate the page position to scroll to when the "Back to Top" button appears.

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'
});
});
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template