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重要知识更新
Jul 08 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
vue.config.js常用配置详解
Nov 14 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_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
原生js中ajax访问的实例详解
2017/09/19 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python控制台显示时钟的示例
2014/02/24 Python
python创建和删除目录的方法
2015/04/29 Python
python异常和文件处理机制详解
2016/07/19 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python3中数组逆序输出方法
2020/12/01 Python
通息工程毕业生自荐信
2013/10/16 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014年科协工作总结
2014/12/09 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
redis三种高可用方式部署的实现
2021/05/11 Redis
Vue2.0搭建脚手架
2022/03/13 Vue.js
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript