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

浏览数：17 / 时间：2015年06月09日

1、

<a id="gotopbtn" style="position:fixed;width:12px;bottom:45px;right:150px;display:none;cursor:pointer;">返回顶部</a>
<script>
var backTop = function(btnId){
var btn = document.getElementById(btnId);

var d = document.documentElement || document.body;
window.onscroll = set;
btn.onclick = function () {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function () {
//console.log(document.body.scrollTop)
//console.log(document.documentElement.scrollTop)
if( document.body.scrollTop ){
document.body.scrollTop -= Math.ceil(document.body.scrollTop * 0.1);
}else{
document.documentElement.scrollTop -= Math.ceil(document.documentElement.scrollTop * 0.1);
}

if (document.body.scrollTop == 1) clearInterval(btn.timer), window.onscroll = set, document.body.scrollTop = 0;
if (document.documentElement.scrollTop == 1) clearInterval(btn.timer), window.onscroll = set, document.documentElement.scrollTop = 0;
}, 10);
};
function set() { btn.style.display = (document.documentElement.scrollTop || document.body.scrollTop) ? ‘block‘ : "none" }
};
backTop(‘gotopbtn‘);

</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();