I am new to angular2. I am converting an html website into angular 2. There is a javascript smoothscroll function and its in an external js file. The problem is that this code and function is running fine in html but not running in angular. Maybe, I am doing some mistakes. Please guide me .
/*!
* Start Bootstrap - New Age v3.3.7 (http://startbootstrap.com/template-overviews/new-age)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
//scroll funtion code
!function(t){"use strict";t("a.page-scroll").bind("click",function(a){var o=t(this);t("html, body").stop().animate({scrollTop:t(o.attr("href")).offset().top-50},1250,"easeInOutExpo"),a.preventDefault()}),t("body").scrollspy({target:".navbar-fixed-top",offset:100}),t(".navbar-collapse ul li a").click(function(){t(".navbar-toggle:visible").click()}),t("#mainNav").affix({offset:{top:50}})}(jQuery);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jamalapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="./styles.css">
<!-- Bootstrap Core CSS -->
<link href="assets/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery linking-->
<script src="assets/lib/bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="assets/lib/bootstrap/js/jquery.filterizr.js"></script>
<!-- Plugin CSS -->
<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">
<!-- Theme CSS -->
<!--<link href="assets/css/style.css" rel="stylesheet">-->
<link href="assets/css/hover-min.css" rel="stylesheet">
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<app-root></app-root>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/lib/jquery/jquery.min.js"></script>
<script src="assets/js/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
<script src="assets/js/new-age.min.js"></script>
<script>
$(function () {
var selectedClass = "";
$(".fil-cat").click(function () {
selectedClass = $(this).attr("data-rel");
$("#portfolio").fadeTo(100, 0.1);
$("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('scale-anm');
$("#portfolio").fadeTo(300, 1);
}, 300);
});
});
</script>
<script>
$(document).ready(function () {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#about").mousemove(function (e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 20;
var newvalueY = height * pageY * -1 - 70;
$('#about').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
</script>
</body>
</html>
<!--this is how i am accessing it into a component-->
<li>
<a class="page-scroll" href="#">HOME</a>
</li>
