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中变量相关的细节分析
Aug 13 Javascript
jquery 指南/入门基础
Nov 30 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
如何手写一个简易的 Vuex
Oct 10 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 遍历文件实现代码
2011/05/04 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php fread读取文件注意事项
2016/09/24 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
jQuery的三种$()
2009/12/30 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
python实现双人五子棋(终端版)
2020/12/30 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
什么是serialVersionUID
2016/03/04 面试题
初中音乐教学反思
2014/01/12 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
小学生手册家长评语
2014/04/16 职场文书
供电工程专业求职信
2014/08/09 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书