html导航页面滚动,HTML5 scrollTo 边栏菜单导航/页面滚动动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

/* IMPORT GOOGLE FONTS */

@import url(http://fonts.googleapis.com/css?family=Lato:400,900,700);

* {

box-sizing: border-box;

}

body {

width: 100%;

height: 100%;

margin: 0 auto;

}

.mainMenu {

position: fixed;

z-index: 999;

left: 0;

top: 10%;

width: 120px;

padding: 10px;

color: #fff;

background-color: #2c3e50;

border-radius: 0 10px 10px 0;

}

.mainMenu h3 {

text-transform: uppercase;

text-align: left;

letter-spacing: 3px;

font: 700 18px PT Sans;

padding: 5px;

margin: 0 0 10px;

border-bottom: 2px dotted rgba(255, 255, 255, 0.1);

}

.mainMenu ul {

list-style-type: none;

margin-left: 5px;

}

.mainMenu ul li {

padding: 3px 0;

}

.mainMenu ul li a {

color: rgba(255, 255, 255, 0.5);

text-decoration: none;

text-transform: uppercase;

font: 400 14px PT Sans;

margin-left: 0px;

-webkit-transition: all 300ms;

-moz-transition: all 300ms;

-ms-transition: all 300ms;

-o-transition: all 300ms;

transition: all 300ms;

}

.mainMenu ul li a:before {

font-family: 'FontAwesome';

font-size: 14px;

content: '\f10d';

padding-right: 10px;

}

.mainMenu ul li a:hover {

color: rgba(255, 255, 255, 0.9);

margin-left: 10px;

}

.mainMenu ul li a:hover:before {

content: '\f064';

}

.mainMenu ul li a.active {

font-weight: 900;

color: #fff;

margin-left: 10px;

}

.mainMenu ul li a.active:before {

content: '\f00c';

}

.sectionOnePage {

width: 100%;

height: 100vh;

}

.sectionOnePage#tata {

background-color: #1abc9c;

}

.sectionOnePage#tete {

background-color: #27ae60;

}

.sectionOnePage#titi {

background-color: #e67e22;

}

.sectionOnePage#toto {

background-color: #d35400;

}

.sectionOnePage#tutu {

background-color: #e74c3c;

}

.sectionOnePage#tyty {

background-color: #c0392b;

}

.sectionOnePage .content {

position: relative;

top: 50%;

transform: translateY(-50%);

width: 50%;

margin: 0 auto;

text-align: center;

font: 900 72px 'Lato';

color: #fff;

text-transform: uppercase;

}

.backToTop {

z-index: 999;

margin: 0;

position: fixed;

bottom: 0;

right: 0;

width: 50px;

height: 50px;

display: none;

}

.backToTop a {

color: #fff;

}

.backToTop a i {

font-size: 32px;

}