博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 向上(顶部),向下(底部)滑动
阅读量:4198 次
发布时间:2019-05-26

本文共 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/

你可能感兴趣的文章
JVM内存模型详解
查看>>
(六) Git--标签管理
查看>>
建造者模式(Builder)-设计模式(三)
查看>>
Linux-网络运维基础
查看>>
Verilog编程网站学习——门电路、组合电路、时序电路
查看>>
android——学生信息显示和添加
查看>>
Android——ImageSwitcher轮流显示动画
查看>>
Android——利用手机端的文件存储和SQLite实现一个拍照图片管理系统
查看>>
图像调优1:清晰度相关参数MTF,SFR,MTF50,MTF50P 以及TVL的概念以及换算说明
查看>>
罗永浩欲直播带货,京东说可以帮忙联系
查看>>
B站,正在变成下一个“公众号”?
查看>>
小米启动安心服务月 手机家电产品可免费清洁保养
查看>>
刘作虎:一加新品将全系支持 5G
查看>>
滴滴顺风车上线新功能,特殊时期便捷出行
查看>>
不会延期!iPhone 12S预计如期在9月发售:升级三星LTPO屏幕
查看>>
腾讯物联网操作系统TencentOS tiny线上移植大赛,王者机器人、QQ公仔、定制开发板等礼品等你来拿 !
查看>>
为云而生,腾讯云服务器操作系统TencentOS内核正式开源
查看>>
腾讯汤道生:开源已成为许多技术驱动型产业重要的创新推动力
查看>>
微信小程序多端框架 kbone 开源
查看>>
视频质量评估算法 DVQA 正式开源
查看>>