js代码部分:
window.onload = function(){
var oTop = document.getElementById("goTop");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
var screenb = $(document).height();
var oBottom = document.getElementById("goBottom");
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrolltop-10 > 0){
oTop.style.display = "block";
}else{
oTop.style.display = "none";
}
if(screenb - screenh - scrolltop < 15){
oBottom.style.display = "none";
}else{
oBottom.style.display = "block";
}
}
oTop.onclick = function(){
//document.documentElement.scrollTop = document.body.scrollTop =0;
$("html,body").animate({scrollTop:0},"slow");
}
oBottom.onclick = function(){
//document.documentElement.scrollTop = document.body.scrollTop =0;
$("html,body").animate({ scrollTop:screenb },"slow");
}
}
2 html代码部分:
<div class="footer_fixed">
<a href="#gotop" class="go_top" id="goTop">go to top</a>
<a target="_blank" title="customer survey" href="'.Url::getUrl("contacts").'" class="cus_survey">customer survey</a>
<div class="ph"><a href="#gobottom" class="go_bottom" id="goBottom">go to bottom</a></div>
</div>
3css部分:
.footer_fixed{position:fixed;right:22px;bottom:22px;z-index:99}
.go_top {
height: 42px;
}
.go_top :hover{
background-position: -45px 0px;
}
#goTop , .cus_survey, .go_bottom{
background: url("../images/footer_fixed.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 40px;
margin: 0 0 -1px;
text-indent: -999em;
width: 43px;
}
.cus_survey {
background-position: 0 -41px;
}
.cus_survey:hover{
background-position: -45px -41px;
}
.go_bottom:hover{
background-position: -45px -119px;
}
.footer_fixed .ph {
display: block;
height: 42px;
}
.go_bottom {
background-position: 0 -119px;
height: 43px;
}
4 背景图片:
http://img.dxcdn.com/combo/global/v5.0.2/img/footer_fixed.png