很多商品展示页，专题页等都会用到。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接平滑滚动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
    * {
        margin: 0;
        padding: 0
    }
    html,body {
        height: 100%;
        min-height: 100%;
    }
    .top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        z-index: 9;
    }
    a {
        color: #fff;
        text-align: center;
        text-decoration: none;
    }
    .top a {
        display: inline-block;
        width: 20%;
    }
    .top a:hover {
        background: rgba(0, 0, 0, .4);
    }
    .page {
        width: 100%;
        height: 100%;
        min-height: 100%;
        background: #3C98FF;
        text-align: center;
    }
    h1 {
        color: #fff;
        padding-top: 20%;
    }
</style>
</head>
<body>
    <div class="top">
        <a href="#div-1">div-1</a>
        <a href="#div-2">div-2</a>
        <a href="#div-3">div-3</a>
        <a href="#div-4">div-4</a>
    </div>
    <div id="div-1" class="page">
        <h1>第一页</h1>
    </div>
    <div id="div-2" class="page">
        <h1>第二页</h1>
    </div>
    <div id="div-3" class="page">
        <h1>第三页</h1>
    </div>
    <div id="div-4" class="page">
        <h1>第四页</h1>
    </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $('a[href*=#]').click(function(event) {
        // 此处正则用于转换带页面URL的锚点，如 http://abc.html#div,具体正则格式据实际情况而定
        var targetId = $(this).attr('href').replace(/\w+.html/,'');
        $("html,body").animate({scrollTop: $(targetId).offset().top}, 1000);
    });
</script>
</body>
</html>