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实现的简单小巧的多级联动菜单
Mar 24 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
一个网马的tips实现分析
Nov 28 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
vue-router单页面路由
Jun 17 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python实现超级玛丽游戏
2020/03/18 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python的历史与优缺点整理
2020/05/26 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Java编程面试题
2016/04/04 面试题
优秀员工推荐信
2014/05/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
医院党员公开承诺书
2014/08/30 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015入党自荐书范文
2015/03/05 职场文书
不同意离婚上诉状
2015/05/23 职场文书
投诉书范文
2015/07/02 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
python 提取html文本的方法
2021/05/20 Python
Python函数中的不定长参数相关知识总结
2021/06/24 Python