本文摘自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中通过点击button标签实现页面跳转的三种方法
Html5draggable属性是如何做到页面拖动效果的?方法总结在这里!
Html map标签怎么用
Html怎么给span添加颜色
Html中col标签中的汉字如何居中?Html col标签的基本使用(内有实例)
Html中图片怎么居中对齐?
Html如何嵌套页面?<iframe>标签告诉你答案
Html与Html5的区别是什么
Html中的include标签是什么?Html include实现配置解析
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 制作一个html页面返回顶部的悬浮按钮