回顶部的兼容JS代码

用法:直接在页面调用该JS代码就行

<script type="text/javascript" src="js/scrolltopcontrol.js"></script>

JS:

var scrolltotop={
    setting:{
        startline:100, //起始行
        scrollto:0, //滚动到指定位置
        scrollduration:400, //滚动过渡时间
        fadeduration:[500,100] //淡出淡现消失
    },
    controlHTML:‘<img src="images/topback.gif" style="width:54px; height:54px; border:0;" />‘, //返回顶部按钮
    controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置
    anchorkeyword:"#top",
    state:{
        isvisible:false,
        shouldvisible:false
    },scrollup:function(){
        if(!this.cssfixedsupport){
            this.$control.css({opacity:0});
        }
        var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
        if(typeof dest=="string"&&jQuery("#"+dest).length==1){
            dest=jQuery("#"+dest).offset().top;
        }else{
            dest=0;
        }
        this.$body.animate({scrollTop:dest},this.setting.scrollduration);
    },keepfixed:function(){
        var $window=jQuery(window);
        var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
        var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;
        this.$control.css({left:controlx+"px",top:controly+"px"});
    },togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop();
        if(!this.cssfixedsupport){
            this.keepfixed();
        }
        this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
        if(this.state.shouldvisible&&!this.state.isvisible){
            this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
            this.state.isvisible=true;
        }else{
            if(this.state.shouldvisible==false&&this.state.isvisible){
                this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
                this.state.isvisible=false;
            }
        }
    },init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop;
            var iebrws=document.all;
            mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
            mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
            mainobj.$control=$(‘<div id="topcontrol">‘+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol();
            $(‘a[href="‘+mainobj.anchorkeyword+‘"]‘).click(function(){mainobj.scrollup();return false;});
            $(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
        });
    }
};
scrolltotop.init();

来源:http://97zzw.com/97站长网

时间: 2024-08-26 07:03:36

回顶部的兼容JS代码的相关文章

弹性返回顶部JS代码

弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

兼容所有浏览器的设为首页收藏本站js代码

大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容IE,chrome,ff,360等 将以下代码放入页面或者新建js文件 <script type="text/javascript"> //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#default#

加入收藏夹的js代码(求兼容chrome浏览器的代码)

从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function(){ var url = "www.xxx.xxx"; var title = "xxx"; if (window.sidebar) { // Mozilla Firefox Bookmark window.sidebar.addPanel(title, url,&q

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

回到顶部js代码

function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用,模拟滚动向上效果 scrolldelay = setTimeout('go_to_top()',5); //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop:因为二者只有一个会

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg

实现页面某位置点击到底部和回顶部

实现效果和hao123 首页那样 开始页面加载默认 “到底部”,当滚动条拉到一定位置后 “到底部” 自动改变为 “回顶部”:点击 “到底部” 页面会跳转到最底部,点击 “回顶部” 页面又会自动跳转到最顶部. 实现代码如下: 先引用 jquery 脚本. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 写样式,div定位在屏幕末位置上(不会因为

最新的JavaScript核心语言标准&mdash;&mdash;ES6,彻底改变你编写JS代码的方式!【转载+整理】

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它

仿腾讯回顶部和建议(jQuery)

jQuery仿腾讯回顶部和建议,懒人图库推荐下载! 使用方法: 1.引用样式文件css/lrtk.css 2.引用jquery的库文件js/jquery.js 3.引用效果的具体js代码文件js/js.js复制至html文件中. 4.将id为tbox的div的内容复制到您的html文件 5.本效果右侧图标会固定在浏览器的右下角(即缩小浏览器窗口一直显示),如果想要固定在页面内容的右侧(即缩小浏览器窗口不显示,请看“仿淘宝回顶部和建议”)