本文摘自PHP中文网,作者V,侵删。
具体代码如下所示:
(学习视频分享:html视频教程)
CSS样式代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .back-to {
bottom : 55px ;
overflow : hidden ;
position : fixed ;
right : 10px ;
width : 110px ;
z-index : 999 ;
}
.back-to .back- top {
background : url ( "./images/top.png" ) no-repeat scroll 0 0 transparent ;
display : block ;
float : right ;
height : 50px ;
margin-left : 10px ;
outline : 0 none ;
text-indent : -9999em ;
width : 50px ;
}
.back-to .back- top :hover {
background-position : -50px 0
}
|
DIV:
1 2 3 | < div style = "display:none;" class = "back-to" id = "toolBackTop" >
< a title = "返回顶部" onclick = "window.scrollTo(0,0);return false;" href = "#top" class = "back-top" ></ a >
</ div >
|
Javascript代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $( function () {
var bt = $( '#toolBackTop' );
var sw = $(document.body)[0].clientWidth;
var limitsw = (sw - 840) / 2 - 80;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css( "right" ,limitsw/8);
}
$(window).scroll( function () {
var st = $(window).scrollTop();
if (st > 30){
bt.show();
} else {
bt.hide();
}
});
});
|
前提:首先引入jQuery
1 | < script type = "text/javascript" src = "/static/js/jquery.min.js" ></ script >
|
效果展示:
阅读剩余部分
相关阅读 >>
Html代表什么
Html tbody标签是什么意思?Html tbody标签align属性用法详解
详解Html中 position属性用法(四种)
单选框的type属性值为什么
Html段落的知识总结
Html如何使用不换行标签
Html如何写出竖线
手把手教你使用img标签添加图片效果(知识)
Html标签含义
Html中自定义菜单随着滚动条滑动的代码实现
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 制作一个html页面返回顶部的悬浮按钮