平滑滚动是一种减少滚动时显示中突然跳跃的技术。 在滚动时，内容将显示为无缝地流入和流出屏幕。 许多浏览器随附它，但它也可以通过网站实现。
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);
})
});
-END-
