css3 实现div位置移动

需求是点击2上面的单词框跳到页面最下面,点击2下面的div 的时候跳到2的上面或者页面顶端,求大神用css3或者jq设计一个比较好的过度效果,或者有类似的demo提供也行,小白在线坐等

获取每个单词框的索引值,然后根据点击的索引值改变它的position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3">
        <div class="new">
            <div class="alert alert-info">
                <h5>reward</h5>
            </div>
            <div class="alert alert-info">
                <h5>reward</h5>
            </div>
            <div class="alert alert-info">
                <h5>reward</h5>
            </div>
            <div class="alert alert-info">
                <h5>reward</h5>
            </div>

            <div class="alert alert-info">
                <h5>reward</h5>
            </div>
            <div class="alert alert-info">
                <h5>reward</h5>
            </div>
        </div>

        <hr>
        <h4>这些我认识</h4>
        <hr>
        <div class="old">
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
            <div class="alert alert-success">
                <h5>reward</h5>
            </div>

            <div class="alert alert-success">
                <h5>reward</h5>
            </div>
        </div>

    </div>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
        (function ($) {
            var $new = $('.new');
            var $new = $('.new');
            $(document).on('click', '.alert-info', function () {
                $(this).appendTo('.old');
            });
            $(document).on('click', '.alert-success', function () {
                $(this).appendTo('.new');
            });

        })(jQuery)
    </script>
</body>
</html>
  • 微博站内应用是如何保证用户信息的安全的?
  • 怎么使 iOS 在页面滚动的时候运行 js?
  • 【javascript】怎么判断一段字符片段,是否一段纯粹的合法的javascript字符串格式?
  • js中对象的属性不能关联其他属性值吗
  • 有么有人见过一个切割火花的js效果,谢谢。
  • 关于es7里面的async/await的一个疑问?
  • 响应式设计的疑问
  • 点击一个texteare但是他的光标不是在第一行开头位置?
  • 自己编写了一个屏蔽百度推广的chrome插件,但是没效果。
  • 移动网站中如何跟踪用户所看的点在页面中的位置来确定是否执行javascript?
  • json例程编译出现错误