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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
住房公积金接收函
2014/01/09 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
个人承诺书怎么写
2014/05/24 职场文书
本科生自荐信
2014/06/18 职场文书
项目合作意向书模板
2014/07/29 职场文书
三孔导游词
2015/02/05 职场文书
社区工作者个人总结
2015/02/28 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
实习介绍信范文
2015/05/05 职场文书
民事辩护词范文
2015/05/21 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技