<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML pure CSS floating window compatible with IE6+</title> <style> /* body container settings */ body { /* In IE6, you need to add the following two style attributes to the body to perfectly achieve fixed floating*/ _background-attachment: fixed; _background-image: url(about:blank); } /* fixed float */ .fix-top { position: fixed; _position: absolute; /* Compatible with IE6 */ right: 0; bottom: 20px; z-index: 99; /* Compatible with IE6, the expression of the _top attribute may vary according to the floating position, please change it by yourself*/ _bottom: auto; _top: expression( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - 20 ); /*The style of the floating window*/ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; color: #fff; text-decoration: none; } </style> </head> <body> <div style="height: 1500px">Read who asks the king to chant, the water falls and the fragrance floats</div> <a class="fix-top" href="#">回到顶部</a> </body> </html>
Effect picture: