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也能包含文件
Oct 26 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
Element InputNumber 计数器的实现示例
Aug 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
基于mysql的bbs设计(二)
2006/10/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP操作xml代码
2010/06/17 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php处理带有中文URL的方法
2016/07/11 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
JS控制表格隔行变色
2006/06/26 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
javascript常用的方法分享
2015/07/01 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
super()与this()的区别
2016/01/17 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
小学生新学期寄语
2014/01/19 职场文书
建筑工地标语
2014/06/18 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
医院合作意向书范本
2015/05/08 职场文书
硕士论文致谢范文
2015/05/14 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
python库sklearn常用操作
2021/08/23 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电