introduce

JQuery variable transparency returns the top code. If you scroll down more than 1200 pixels, the transparency of the button will decrease, reducing visual interference, making it easier to browse the content body, a very intimate user experience, and compatible with mainstream browsers

Original address: JQUERY Variable Transparency Return Top Code

Reference js

 <script src=" https://www.ihewro.com/js/gotoTop.js "></script>

css

I have modified the original CSS a little. You can modify it again 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://www.ihewro.com/cd-top-arrow.svg ) 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://www.ihewro.com/cd-top-arrow.svg ) no-repeat center 50%; opacity: 1; } .cd-top.cd-fade-out { /*If the user continues to scroll down, the transparency of this button will become lower*/ 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; } }

html

 <a href="#0" class="cd-top">Top</a>

usage method

  • Js refers to the </head> In front of the label
  • Add css to style.css file
  • HTML added to the <body> Behind the label </body> In front of

other

Originally, this button would be covered by other div modules.

How to set a DIV on the top layer of all layers, the top layer DIV, is actually very simple. You just need to use this style on this DIV,

 z-index:99999;

THE END

Last modification: March 23, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.