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 相关文章推荐
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jQuery进行组件开发完整实例
2015/12/15 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Python验证企业工商注册码
2015/10/25 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python2 与python3的print区别小结
2018/01/16 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
自我鉴定书范文
2013/10/02 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
应届毕业生求职信
2014/05/26 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
立志成才演讲稿
2014/09/04 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
使用python绘制横竖条形图
2022/04/21 Python