Question

我使用html和javascript构建了一个功能齐全的登录页面。我目前正在尝试将着陆集成到更大的angularjs应用程序中作为组件。通过动态地将所有css和js文件添加到所有组件，我已经完成了所有工作。我唯一的问题是点击页面顶部的导航栏不会像应该的那样向下滚动，而是尝试将应用程序重定向到不存在的页面/组件。

登陆页面的位置是

localhost:4200/landing

html中有以下内容

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#top-of-page">
      <img src="" width="1" height="1" class="d-inline-block align-top" alt="" style="margin-right: 6px">Home
    </a> <!--img width and height used to be 30x30 px -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#download">Download</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
        </li>
      </ul>
      <!--<button type="button" class="btn btn-signup" style="margin-left: 15px;">Sign Up</button>
      <button type="button" class="btn btn-login">Log In</button>-->
    </div>
  </div>
</nav>

当我点击＆＃34;关于＆＃34;例如，而不是滚动到about部分，应用程序重定向到

localhost:4200/#about

我有一个带有第一个函数的js文件//使用jQuery的平滑滚动缓动上面注释它因某些原因没有被调用。

(function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    console.log("darrel");
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 48)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // var crapStick = function() {
  //   console.log("Pam");
  // };

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 54
  });

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav")[0] != undefined) {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

})(jQuery); // End of use strict

我知道该文件可以访问/在正确的范围内，因为正确调用了navbarCollapse。请随意询问任何额外的代码，这些代码至少无法确定问题的根源。另外我应该提到所有这些代码都是独立的登陆页面。

着陆页导航链接重定向不滚动

0 个答案: