购物车抛物线效果

<div class="js_add">加入购物车</div>
<div class="js_goods_PriceShop">购物车</div>

.u-flyer {
    width: 24px;
    height: 24px;
    position: fixed;
}

$('.js_add').click(function(evt){
    var offset = $('.js_goods_PriceShop').offset();
    var scrollTop = $(document).scrollTop();//获取默认滚动条高度
    $(window).resize(function(){//窗口改变重新获取
        offset=$('.js_goods_PriceShop').offset();
    });
    $(window).scroll(function() { //滚动条改变
        scrollTop=$(window).scrollTop(); 
    });
    var $ball = $('<img class="u-flyer" src="images/add_img.png"/>').appendTo("body");
    $ball.css("top",evt.pageY-scrollTop+'px')
    $ball.css("left",evt.pageX+'px')
    $ball.css("transition",'left 0s, top 0s')
    setTimeout(()=>{
        $ball.css("top",offset.top-scrollTop+'px')
        $ball.css("left",offset.left+'px')
        $ball.css("transition",'left 0.5s, top 0.5s ease-in')
    },20)
    setTimeout(function(){
        $ball.remove()
    },500)
})