如何在jquery中从右、从左、从下移动css元素

当这个页面在我的网站上滚动时，它应该做：table_area-left从左到右移动到它的当前位置，table_area-right从右到左移动到它当前位置，而morph button从下到上移动。我找不到它的jquery代码；我不太了解jquery。请帮我。

我还添加了这个jquery ui库：

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"
          integrity="sha256-lCF+55kMUF+3fO/3BiXui4eiUKcQmtr7ecKSeLVDxIQ="
          crossorigin="anonymous"></script>

<section id="hizmetlerimiz">
        <!-- hizmetlerimiz sayfası -->
        <div class="wrapper">
            <div class="genel_icerik">
            <div class="tablo_area-left">
                <h2>RULO AÇMA BOY KESME MAKİNELERİ</h2>
                <p>
                    1,50 mm'den 25.00 mm'ye kadar her tür kalite sıcak ve dekape(RP) grubu malzemeler istenilen
                    her boyda kesilerek servise sunulmaktadır. 0,50 mm'den 3,00 mm'ye kadar tüm soğuk ve
                    galvaniz grubu malzemeler özenle istenilen boyda kesilmekte ve itina ile paketleme yapılmaktadır.
                </p>
            </div>
            <div class="tablo_area-right">
                <h2>RULO DİLME MAKİNELERİ</h2>
                <p>
                    0,18 mm'den 2,50 mm'ye kadar her tür soğuk ve galvaniz grubu malzemeler hassas toleranslar dahilinde
                    dilinmekte ve özenle paketleme işlemi yapılmaktadır. 1,50 mm'den 8,00 mm'ye kadar her tür sıcak ve
                    dekape(RP) grubu malzemeler hassas bir işçilikle ve istenilen genişlik toleranslarında dilinmekte ve itina ile
                    paketlenmektedir.
                </p>
            </div>
            <!-- Table area right end-->
            <div class="morph-button morph-button-overlay morph-button-fixed morph-button">
                <button type="button" style="border-radius:10px; border:inset black; margin-top:50px;" title="Daha Fazla Bilgi">Daha Fazla Bilgi</button>
            </div>
            <!--morp button  -->
        </div>
        <!-- genel icerik end-->