Rating: In the past, when we wanted to go back to the top, we had to scroll up the scroll wheel until it rolled to the top. Now we can see a button in the lower right corner to return to the top; today, I want to talk about the layout of this button. If you are interested, do not miss it. I hope this example can help you with the huge page content of many portal websites, which will be pulled down for a long time, in the past, when we wanted to go back to the top, we had to scroll up the scroll wheel until it rolled to the top. Now, if you carefully observe whether there was a button in the bottom right corner that clicked back to the top, right, today I want to talk about the layout of this button. I will not talk about it much, but I will directly add the code. I will try my best to mark the css style in the code for your convenience;
Copy code
The Code is as follows:
<! 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> fixed positioning to solve the IE6 flash problem </title>
<Style type = "text/css">
* Html {
Background-image: url (about: blank );
Background-attachment: fixed;
}/* This code solves the problem that IE6.0 does not flash */
. BackgroundBox {
Border: 1px solid orange;
Width: 100px;
Height: 2000px;
}
. FixedBox {
Border: 1px solid red;
Width: 100px;
Height: 100px;
Position: fixed;/* supports w3c standard browsers */
_ Position: absolute;/* For IE6 separately */
Left: 200px;/* 200px from the top */
Top: 200px;/* 200px to the right */
_ Top: expression(eval(document.doc umentElement. scrollTop + 200);/* + 200 is the position below IE6.0 from the top of the browser window */
/* The distance from the bottom of IE6.0 is 0 PX */
/* _ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));*/
}
</Style>
</Head>
<Body>
<Div class = "backgroundBox"> </div>
<Div class = "fixedBox"> fixed box </div>
</Body>
</Html>
