热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery实现返回顶部功能

本文给大家带来的是使用javascript结合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.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'
});
});

推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
author-avatar
Max_coffee
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有