网页内容实现太长实现返回顶部的代码

标签：javascript   jquery   

</script>

将上面代码直接复制到最后的</body>标签之上就行了

2、style.css

/*gotop*/
.cbbfixed {position: fixed;right: 10px;transition: bottom ease .3s;bottom: -85px;z-index: 3;cursor:pointer;}
.cbbfixed .cbbtn {width: 40px;height: 40px;display: block;background-color: #02a2aa;}
.cbbfixed .gotop {transition: background-color ease .3s;margin-top: 1px;}
.cbbfixed .gotop .up-icon{float:left;margin:14px 0 0 9px;width:23px;height:12px;background: url(../images/side-icon02.png);}
.cbbfixed .gotop:hover {background-color:#2c2d2e;}
.cbbfixed .cweixin {background: #dadbdd;}
.cbbfixed .cweixin div {background: url(../images/erwei.png);width: 194px;height: 199px;position: absolute;left: -194px;top: -115px;opacity: 0;transform: scale(0);    -webkit-transform: scale(0);transform-origin: 100% 70%;-webkit-transform-origin: 100% 70%;transition: transform ease .3s,opacity ease .3s;-webkit-transition: all ease .3s;display:none\0;*display:none;}
.cbbfixed .cweixin:hover div {display: block;transform: scale(1);-webkit-transform: scale(1);opacity: 1;*display:block;}
.cbbfixed .cweixin .weixin-icon{float: left;margin:12px 0 0 11px;width:18px;height: 18px; background: url(../images/side-icon01.png);}

图片什么的自己对应着改就行了

引入jquery.js

引入backtop.js

backtop.js

//javascript Document
function chinaz(){
    this.init();
}
chinaz.prototype = {
    constructor: chinaz,
    init: function(){        
        this._initBackTop();
    },    
    _initBackTop: function(){
        var $backTop = this.$backTop = $(‘<div class="cbbfixed">‘+
                        ‘<a class="cweixin cbbtn"">‘+
                            ‘<span class="weixin-icon"></span><div></div>‘+
                        ‘</a>‘+
                        ‘<a class="gotop cbbtn">‘+
                            ‘<span class="up-icon"></span>‘+
                        ‘</a>‘+
                    ‘</div>‘);
        $(‘body‘).append($backTop);
        
        $backTop.click(function(){
            $("html, body").animate({
                scrollTop: 0
            }, 120);
        });

        var timmer = null;
        $(window).bind("scroll",function() {
            var d = $(document).scrollTop(),
            e = $(window).height();
            0 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
            clearTimeout(timmer);
            timmer = setTimeout(function() {
                clearTimeout(timmer)
            },100);
       });
    }
    
}
var chinaz = new chinaz();

实例代码 http://download.csdn.net/detail/wangdianyong/8583979

3、style样式

<style>
.up{width:54px;height:54px;background:url(images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
</style>

引入jquery

引入scrolltopcontrol.js

scrolltopcontrol.js

var scrolltotop={
    setting:{
        startline:100, //起始行
        scrollto:0, //滚动到指定位置
        scrollduration:400, //滚动过渡时间
        fadeduration:[500,100] //淡出淡现消失
    },
    controlHTML:‘<div class="up"></div>‘, //返回顶部按钮
    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://download.csdn.net/detail/wangdianyong/8584001

网页内容实现太长实现返回顶部的代码

标签：javascript   jquery   

原文地址：http://blog.csdn.net/wangdianyong/article/details/44994181