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模拟地球旋转效果代码实例
Dec 02 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
7个JS基础知识总结
Mar 05 Javascript
js简单实现交换Li的值
May 22 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python实现可变变量名方法详解
2019/07/01 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python将数组n等分的实例
2019/12/02 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
学校志愿者活动总结
2014/06/27 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL