I have easy code I want to use to us arrows instead of scroll bar but I have problem sith scrollLeft function. It stll shows me zero. Can you advice me what can be problem?

/* SIDE SCROLL */

var leftOffset = $('.categories__list').scrollLeft();

$('.right-arrow').click(function () {
    event.preventDefault();
    alert(leftOffset);

})

This is my code on index.php:

    <section class="categories">
        <ul class="categories__list">
            <a href="" class="left-arrow"></a>
            <li class="categories__items">
                <ul class="categories__list-nested">
                    <li class="categories__items-img"><a href="categories__link"><img src="/bazar/assets/img/pocitace.png" alt="" class="categories__img"></a></li>
                    <li class="categories__items-nested"><strong><a href="categories__link">Počítače</a></strong></li>
                    <li class="categories__items-nested"><a href="categories__link">Počítače</li></a>
                    <li class="categories__items-nested"><a href="categories__link">Monitory</li></a>
                    <li class="categories__items-nested"><a href="categories__link">Notebooky</li></a>  
                </ul>
            </li>
         </ul>
     </section>

UDPATE:

I made it by this way finally:

    var scrollEnd = $('.categories__list').width();

    $('.right-arrow').click(function () {
        event.preventDefault(); 
        $('.categories__list').animate({scrollLeft: scrollEnd}, 1000)
    })

    $('.left-arrow').click(function () {
        event.preventDefault();
        $('.categories__list').animate({scrollLeft: 0}, 1000)
    })

I was confused bcz on w3school example for scrollLeft they used alert and it was working.