├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Css-Smooth-Scrolling-Effect 2 | 3 | 4 | https://user-images.githubusercontent.com/42389395/179485343-fd807cf1-7f4b-4411-8faa-f4a6cf0832a5.mov 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 | 20 | 21 |

Home

22 |

About Us

23 |

Contact

24 |

Social

25 |

Feedback

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Montserrat', sans-serif; 5 | } 6 | html{ 7 | scroll-behavior: smooth; 8 | } 9 | body{ 10 | background: #262626; 11 | } 12 | .container{ 13 | position: relative; 14 | width: 100%; 15 | } 16 | .container section{ 17 | position: relative; 18 | width: 100%; height: 100vh; 19 | line-height: 100vh; 20 | } 21 | .container section:nth-of-type(2n+1){ 22 | background: #fcfbf9; 23 | } 24 | .container section:nth-of-type(2n){ 25 | background: #f8f6f1; 26 | } 27 | .container section h1{ 28 | text-align: center; 29 | font-size: 70px; 30 | text-transform: uppercase; 31 | } 32 | 33 | .container ul{ 34 | position: fixed; 35 | top: 0; left: 0; 36 | background: #262626; 37 | width: 100%; height: 60px; 38 | z-index: 10; 39 | } 40 | .container ul li{ 41 | list-style: none; 42 | width: calc(100% / 5); height: 100%; 43 | float: left; 44 | } 45 | .container ul li a{ 46 | display: inline-block; 47 | width: 100%; height: 100%; 48 | text-align: center; line-height: 60px; 49 | text-decoration: none; text-transform: uppercase; 50 | color: #fff; 51 | } 52 | .container ul li a:hover{ 53 | background: #ff5722; 54 | 55 | } --------------------------------------------------------------------------------