背景：因为看到很多页面有下图的效果，点击红线框部分，则页面滑动到另一个位置，查看页面的源码发现红线框部分是用CSS的圆角边框实现的，于是......
上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<style>
body{
margin:0px;
padding:0px;
background-color: #1f272a;
}
/*圆角效果的实现*/
.btn-dwn {
/*
必填项
*/
/*宽度和高度必须一致，才能保证是圆形*/
58px;
height: 58px;
/*border-radius的属性值越大，圆形效果越明显*/
border-radius: 50%;
/*设置边框大小、样式、颜色*/
border: 2px solid rgba(255,255,255,.15);
/*
非必填项
*/
color: rgba(255,255,255,.6);
text-align: center;
font-size: 18px;
position: absolute;
left: 50%;
bottom: 60px;
line-height: 58px;
}
</style>
<script>
//滑动效果
function scrollToTarget(D){
if(D == 1) // Top of page
{
D = 0;
}
else if(D == 2) // Bottom of page
{
D = $(document).height();
}
else // Specific Bloc
{
D = $(D).offset().top;
}
$('html,body').animate({scrollTop:D}, 'slow');
}
</script>
</head>
<body>
<a onclick="scrollToTarget('#core')" class="btn-dwn"><span class="glyphicon glyphicon-chevron-down"></span></a>
</body>
</html>
实现效果
![clipboard[1]](http://images0.cnblogs.com/blog/762274/201506/021701296959460.png "clipboard[1]")
关于滑动
利用jQuery的动画效果实现，script脚本中的scrollToTarget方法可以实现滑动，照搬页面源码的，需要注意的是在页面中还需要有一个id为"core"的元素，点击按钮才会滑动至相应的位置