Question

我用html和css设计了一个页面，并放置了一个导航栏，当我单击一个导航栏项时，它在互联网上找到了，它的工作非常完美，它滚动到另一部分，但是当我再次单击以返回或转到另一部分无效！

我不知道jquery，但是如果链接有效，我可以添加另一个js吗？

这是HTML

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#myVideo"><img src="img/acp logodarker.png"></img></a>
            <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 text-uppercase ml-auto">
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="index.html#myVideo">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="index.html#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="index.html#contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://ws.onehub.com/workspaces/1188704/signin">INVESTOR LOGIN</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

jquery

/*!
 * Start Bootstrap - Agency v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/agency)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
 */
!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery);

css

  #mainNav {
    background-color: white; }
    #mainNav .navbar-toggler {
      font-size: 12px;
      right: 0;
      padding: 13px;
      text-transform: uppercase;
      color: white;
      border: 0;
      background-color: #293246;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
    #mainNav .navbar-brand {
      color: #EC9C3F;
      font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, cursive; }
      #mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
        color: #EC9C3F; }
    #mainNav .navbar-nav .nav-item .nav-link {
      font-size: 90%;
      font-weight: 400;
      padding: 0.75em 0;
      letter-spacing: 1px;
      color: #293246;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
      #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
        /* Active navbar */
        color: #000; }
    #mainNav img {
      height: 52px;
      width: auto; }

  @media (min-width: 992px) {
    #mainNav {
      padding-top: 25px;
      padding-bottom: 25px;
      -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
      -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
      transition: padding-top 0.3s, padding-bottom 0.3s;
      border: none;
      background-color: transparent;
      background-color: rgba(248, 249, 250, 0.5); }
      #mainNav .navbar-brand {
        font-size: 1.75em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s; }
      #mainNav .navbar-nav .nav-item .nav-link {
        padding: 1.1em 1em !important; }
      #mainNav.navbar-shrink {
        color: white;
        padding-top: 0;
        padding-bottom: 0;
        background-color: #293246; }
        #mainNav.navbar-shrink .navbar-brand {
          font-size: 1.25em;
          padding: 12px 0; }
        #mainNav.navbar-shrink .nav-item .nav-link {
          color: white; }
          #mainNav.navbar-shrink .nav-item .nav-link.active, #mainNav.navbar-shrink .nav-item .nav-link:hover {
            color: #EC9C3F;
            background-color: #293246; } }

Answer 1

这是小玩意儿

! function(a) {
    "use strict";
    a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
            var o = a(this.hash);
            if ((o = o.length ? o : a("[name=" + this.hash.slice(1) + "]")).length) return a("html, body").animate({
                scrollTop: o.offset().top - 54
            }, 1e3, "easeInOutExpo"), !1
        }
    }), a(".js-scroll-trigger").click(function() {
        a(".navbar-collapse").collapse("hide")
    }), a("body").scrollspy({
        target: "#mainNav",
        offset: 54
    });
    var o = function() {
        a("#mainNav").offset().top > 100 ? a("#mainNav").addClass("navbar-shrink") : a("#mainNav").removeClass("navbar-shrink")
    };
    o(), a(window).scroll(o), a(".portfolio-modal").on("show.bs.modal", function(o) {
        a(".navbar").addClass("d-none")
    }), a(".portfolio-modal").on("hidden.bs.modal", function(o) {
        a(".navbar").removeClass("d-none")
    })
}(jQuery);

导航栏仅在第一次单击时有效，在第二次单击中无效

1 个答案: