首页 > web前端 > html教程 > 制作一个html页面返回顶部的悬浮按钮

制作一个html页面返回顶部的悬浮按钮

王林
发布: 2020-12-25 11:15:51
转载
8185 人浏览过

制作一个html页面返回顶部的悬浮按钮

具体代码如下所示:

(学习视频分享:html视频教程

CSS样式代码:

.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:

<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代码:

$(function () {
	        var bt = $(&#39;#toolBackTop&#39;);
	        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

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
登录后复制

效果展示:

d5d53f77d3d2a57728eaa2360c007e4.png

按钮图片:

4f54e24b41c1a94195be78a1baf8f6d.png

相关推荐:html教程

以上是制作一个html页面返回顶部的悬浮按钮的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板