Как остановить Angular 9, пропуская элемент span с прикрепленной функцией Js?

Я создал элемент span <span id="scroll-top"></span>, который отображает изображение со стрелкой вверху, когда пользователь прокручивает вниз и прокручивает пользователя вверх при нажатии, функция My JS отлично работает, когда вы запускаете ее как проект HTML, но angular 9 не поднимает его (я я конвертирую свой HTML-проект в angular, если вам интересно), я перепроверил свои ссылки (css и js на angular), и они в порядке, как ни странно, я использовал много функций js, но это единственный угловой 9 пропусков. В чем может быть проблема?

CSS-

 scroll-top{width:40px;height:40px;z-index:99;position:fixed;bottom:100px;right:30px;display:none;cursor:pointer;background:url(../images/slider/top.png) no-repeat}

JS-

$(document).ready((function(){$(window).scroll((function(){$(this).scrollTop()>40?$("#scroll-top").fadeIn():$("#scroll-top").fadeOut()})),$("#scroll-top").click((function(){$("html, body").animate({scrollTop:0},1e3)}))}));

Использовал ли я синтаксис, который не поддерживает angular 9?