scroll-behavior
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior
// 默认auto没有滚动动画效果
scroll-behavior: smooth;
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
/* 默认值auto */
scroll-behavior: smooth;
}
.a-bgbox {
display: block;
width: 100%;
height: calc(100vh);
}
ul{
position: fixed;
right: 0px;
top: 50%;
}
</style>
</head>
<body>
<a class="a-bgbox" name="a1" style="background-color: aliceblue;">我是描点1</a>
<a class="a-bgbox" name="a2" style="background-color: antiquewhite;">我是描点2</a>
<a class="a-bgbox" name="a3" style="background-color: aqua;">我是描点3</a>
<a class="a-bgbox" name="a4" style="background-color: aquamarine;">我是描点4</a>
<ul>
<li><a href="#a1" class="myid">aliceblue</a></li>
<li><a href="#a2" class="myid">antiquewhite</a></li>
<li><a href="#a3" class="myid">aqua</a></li>
<li><a href="#a4" class="myid">aquamarine</a></li>
</ul>
</body>
<script>
// $(function(){
// $(".myid").click(function(){
// debugger;
// if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
// var $target = $(this.hash);
// $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
// if ($target.length) {
// var targetOffset = $target.offset().top;
// $('html,body').animate({scrollTop: targetOffset},800);
// return false;
// }
// }
// });
// });
</script>
</html>