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();
实例代码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