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 鼠标滚轮事件
Apr 09 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
js实现百度搜索提示框
Feb 05 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
我的论坛源代码(六)
2006/10/09 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python print 按逗号或空格分隔的方法
2018/05/02 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
局域网标准
2016/09/10 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
安全标准化实施方案
2014/02/20 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
普通党员对照检查材料
2014/09/24 职场文书
民间借贷借条如何写
2015/05/26 职场文书
党支部评议意见
2015/06/02 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL