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 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
H5上传本地图片并预览功能
May 08 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python随机数分布random测试
2018/08/27 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python os.access()用法实例
2019/02/18 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
竞选班长的演讲稿
2014/04/24 职场文书
工程售后服务承诺书
2014/05/21 职场文书
小学课外活动总结
2014/07/09 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
观后感开头
2015/06/19 职场文书
趣味运动会赞词
2015/07/22 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
Vue监视数据的原理详解
2022/02/24 Vue.js
vue的项目如何打包上线
2022/04/13 Vue.js
vue封装数字翻牌器
2022/04/20 Vue.js
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android