使用纯css/html实现回到顶部和回到首页功能,无任何js代码,实现了一个外观不错,鼠标上滚有提示效果的回到顶部和回到首页功能。
源代码如下:
<style type="text/css" rel="stylesheet">
.jvm123-home, .jvm123-top {
margin: 5px 0;
width: 50px;
height: 50px;
background-size:100% 100%
}
.jvm123-home {
background-image: url("http://jvm123.com/wp-content/uploads/2019/08/home.jpg");
}
.jvm123-top {
background-image: url("http://jvm123.com/wp-content/uploads/2019/08/top.jpg");
}
.jvm123-home:hover {
background-image: url("http://jvm123.com/wp-content/uploads/2019/08/home1.jpg");
}
.jvm123-top:hover {
background-image: url("http://jvm123.com/wp-content/uploads/2019/08/top1.jpg");
}
</style>
<div style="display:block;z-index: 1000;position: fixed;right: 1px;bottom: 10%;width: 50px;opacity: 0.8;margin-right: 5px;">
<a href="http://jvm123.com"><div class="jvm123-home"> </div></a>
<a href="#"><div class="jvm123-top"> </div></a>
</div>
将这段代码放在html页面的任何<body>标签内的位置,并将首页的连接地址改为自己网站的页面即可。
效果如下所示:
手机端效果 电脑端效果
在线演示: http://jvm123.com/p/springcloud-doc/index.html