CSS circle and page sliding effect (December June 02, 2015), css December 2015
Background: As you can see the effects of many pages, click the red line box to move the page to another location. You can see that the red line box is implemented by using the CSS rounded border, so ...... <! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Link rel = "stylesheet" href = "css/bootstrap.min.css" type = "text/css"/>
<Style>
Body {
Margin: 0px;
Padding: 0px;
Background-color: # 1f272a;
}
/* Implementation of the rounded corner effect */
. Btn-dwn {
/*
Required
*/
/* The width and height must be consistent to ensure the circle */
Width: 58px;
Height: 58px;
/* The greater the value of the border-radius attribute, the more obvious the circle effect */
Border-radius: 50%;
/* Set the border size, style, and color */
Border: 2px solid rgba (255,255,255,. 15 );
/*
Optional
*/
Color: rgba (255,255,255,. 6 );
Text-align: center;
Font-size: 18px;
Position: absolute;
Left: 50%;
Bottom: 60px;
Line-height: 58px;
}
</Style>
<Script>
// Sliding effect
Function scrollToTarget (D ){
If (D = 1) // Top of page
{
D = 0;
}
Else if (D = 2) // Bottom of page
{
D = $ (document). height ();
}
Else // Specific Bloc
{
D = $ (D). offset (). top;
}
$ ('Html, body'). animate ({scrollTop: D}, 'low ');
}
</Script>
</Head>
<Body>
<A onclick = "scrollToTarget ('# core ') "class =" btn-dwn "> <span class =" glyphicon-chevron-down "> </span> </a>
</Body>
</Html>
Effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
