描点返回-动画 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>描点返回</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        max-width: 640px;
        min-width: 320px;
        margin: 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    .box {
        height: 500px;
    }
    
    .btn {
        display: block;
        width: 50%;
        height: 50px;
        line-height: 50px;
        margin: 20px auto 50px;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        text-decoration: none;
        filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid: DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr=blue, gradientType=0);
        -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid: DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr=blue, gradientType=0);
        /*IE8*/
        background: red;
        /* 一些不支持背景渐变的浏览器 */
        background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
        background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
    }
    </style>
</head>

<body>
    <div class="box" style="background: #A39D9D" id="formTab">第一个</div>
    <div class="box" style="background: #E7B2B2">第二个</div>
    <div class="box" style="background: #987F7F">第三个</div>
    <a href="javascript:;" class="btn" onclick="$('html, body').animate({scrollTop : $('#formTab').offset().top}, 500)">我也要测</a>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</body>

</html>

效果图：

 简单写在页面里返回指定div：

 onclick="$('html, body').animate({scrollTop : $('#form_wrapper').offset().top}, 500)"

 

posted @ 2017-06-14 09:26  前端HL  阅读(143)  评论(0)  编辑  收藏  举报