1

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>
vinS
  • 1,417
  • 5
  • 24
  • 37
Kylo Ren
  • 486
  • 6
  • 24
  • The html code is of indext.html – Kylo Ren Jul 10 '17 at 07:16
  • Best way is to convert your code to TS code. You need to convert this code to angular js code. Use Typescript instead. For example To convert $(".fil-cat").click(function () {}); Bind these events in the particular component where .fil-cat exist. If it's part of the root component define click handlers there. If there is some html code that is defined inside the index file. Move it to app.component.html – umar Jul 10 '17 at 07:56
  • This function is working fine. The problem is with scroll function code that i have in the javascript file. How do i call this function which is in external js file in any component? – Kylo Ren Jul 10 '17 at 08:16
  • Possible duplicate of [Smooth scroll angular2](https://stackoverflow.com/questions/36092212/smooth-scroll-angular2) – umar Jul 10 '17 at 08:29

0 Answers0