jQuery горизонтальная прокрутка при нажатии не работает

Question

Я знаю, что есть несколько вопросов по этой теме c, но я не могу понять, почему это не работает ...

У меня есть веб-сайт в горизонтальном формате, у меня 2 стрелки на снизу и хотел бы иметь возможность щелкнуть стрелку вправо для прокрутки вправо и влево для прокрутки влево.

Это html:

<div class="arrows">
    <div class="arrow-left">
        <a href="">
          <img src="/assets/images/arrow-left.svg"/>
          </a>
      </div>
    <div class="arrow-right">
        <a href="">
          <img src="/assets/images/arrow-right.svg"/>
          </a>
      </div>
  </div>

и это jQuery

$(document).ready(function(){

  var scrollTimer;
  var $document = $(document);
  var scrollOffset = 20;
  var maxScrollOffsetLeft = $document.width() - $("body").innerWidth();

  function scrollContent(scrollDir) {
      var scrollArgs = {
          scrollLeft: ($document.scrollLeft() + (scrollOffset * scrollDir))
      };
      $("html").animate(scrollArgs, 50);
  };

  function scrollLeft() {
      if ($document.scrollLeft() > 0) {
          scrollContent(-1);
      }
  };

  function scrollRight() {
      if ($document.scrollLeft() < maxScrollOffsetLeft) {
          scrollContent(1);
      }
  };

  function scrollStop() {
      clearInterval(scrollTimer);
  };

  $(".arrow-left").on("mousedown", function () {
      scrollTimer = setInterval(scrollLeft, 60);
  }).on("mouseup", scrollStop);
  $(".arrow-right").on("mousedown", function () {
      scrollTimer = setInterval(scrollRight, 60);
  }).on("mouseup", scrollStop);

});

Я не получаю никаких стрелок консоли, но он не работает все, что происходит, когда я нажимаю на стрелки, это то, что кажется, что страница обновляется или что-то в этом роде. Кто-нибудь знает почему? Или есть лучшее решение?

Спасибо всем:)