jquery 实现返回顶部功能


Posted in Javascript onNovember 17, 2014

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

jquery 实现返回顶部功能

jquery 实现返回顶部功能

(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>\u8fd4\u56de\u9876\u90e8</a><a href="#" id="callSurvey"><i></i>\u610f\u89c1\u53cd\u9988</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 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
原生js实现弹幕效果
Nov 29 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 #Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 #Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
PHP PDO操作总结
Nov 17 #Javascript
JavaScript函数详解
Nov 17 #Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 #Javascript
You might like
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
企业治理工作自我评价
2013/09/26 职场文书
大学专科求职信
2014/07/02 职场文书
匿名检举信范文
2015/03/02 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
关于做家务的心得体会
2016/01/23 职场文书