平滑滚动是一种减少滚动时显示中突然跳跃的技术。 在滚动时,内容将显示为无缝地流入和流出屏幕。 许多浏览器随附它,但它也可以通过网站实现。

Step1 – Html

 <html>
<body>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
 <nav>
 <ul>
 <li><a class="nav" href="#page1">1</a></li>
 <li><a class="nav" href="#page2">2</a></li>
 <li><a class="nav" href="#page3">3</a></li>
 <li><a class="nav" href="#page4">4</a></li>
 <li><a class="nav" href="#page5">5</a></li>
 </ul>
 </nav>
 
 <section id="page1"></section>
 <section id="page2"></section>
 <section id="page3"></section>
 <section id="page4"></section>
 <section id="page5"></section>
</body>
</html>

Step2 – main.css

nav{
 position:relative;
}

ul{
 background-color:#666;
 position: fixed;
 top: 50%;
 left: 10px;
 transform: translate(0%, -50%);
 border-radius: 55px;
 padding:20px;
}

li.active{
 background-color:#ccc; 
}

li {
 list-style:none;
 background-color:#f1f1f1;
 border-radius: 100px;
 width:20px;
 height:20px;
 margin-bottom:10px;
 position:relative;
 
}
li a{
 text-decoration:none;
 position:absolute;
 color:#000;
 top: 50%;
 left: 50%;
 padding:10px;
 transform: translate(-50%, -50%);
 
}

li:last-child {
 margin-bottom:0px;
}

header {
 position:absolute; 
}

section{
 width:100%;
 height:100%;
}
#page1{
 background-color:#4a7c59; 
}

#page2{
 background-color:#68b0ab;
}

#page3{
 background-color:#8fc0a9;
}

#page4{
 background-color:#c8d5b9;
}

#page5{
 background-color:#faf3dd;
}

Step3 – main.js

$(function() {
 $('.nav').click(function(){
 $('li').removeClass("active"); 
 var link = $(this).attr('href');
 $(this).parent().addClass("active");
 var posi = $(link).offset().top;
 $('body,html').animate({scrollTop:posi},700);
 })
});