Original link: https://www.yf-ch.com/archives/1928.html
Variable transparency returns to the top code. If you scroll down more than 1200 pixels, the transparency of the button will decrease, reducing visual interference and making it easier to browse the content body. Very intimate user experience, compatible with mainstream browsers
<script src="https://blog.yunfanch.com/js/prism.js"></script>
I modified a little bit in the original css, you can re-modify in the original code.
.cd-top { z-index:9999; display: inline-block; border-radius: 3px; height: 38px; width: 38px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(https://blog.yunfanch.com/img/top.png) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 0.85; } .cd-top.cd-is-visible:hover { /* the button becomes visible */ visibility: visible; background: #8BC34A url(https://blog.yunfanch.com/img/top.png) no-repeat center 50%; opacity: 1; } .cd-top.cd-fade-out { /* 如果用户继续向下滚动,这个按钮的透明度会变得更低*/ opacity: .5; } .no-touch .cd-top:hover { background-color: #e86256; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 38px; width: 38px; right: 30px; bottom: 30px; } }
<a href="#0" class="cd-top">Top</a>
js is referenced in front of the tag of header.php
Add css to the style.css file
HTML added to header.php before the back of the tag
Originally, this button would be covered by other div modules.
How to set a DIV at the top of all layers, the top DIV is actually very simple, just use this style on this DIV,
z-index:99999;
This article is transferred from: https://www.yf-ch.com/archives/1928.html
This site is only for collection, and the copyright belongs to the original author.