纯css回到顶部和回到首页功能,无任何js代码

标签:

本文出自jvm123.com-java技术分享站:http://jvm123.com/2019/08/totop.html

使用纯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

发表评论