本文共 1803 字,大约阅读时间需要 6 分钟。
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代码部分:
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
转载地址:http://xjdli.baihongyu.com/