Script nicht ausgeführt

Question

Ich habe sehr wenig Erfahrung mit Websprachen, so dass dies ein einfacher Fehler sein kann.

Ich habe eine Webseite mit internen Links wie in <a href="#div-id">button</a>. Aufgrund eines responsiven Bootstrap-Menüs übersteuert das Scrollen jedoch manchmal. Das Problem wird genau wie in einer vorherigen Frage beschrieben und ich versuchte, die akzeptierte Lösung zu implementieren:

How can I use HTML ID links with the Bootstrap navbar-header?

Allerdings ist die vorgeschlagene Funktion nie ausgeführt. Ich habe es wie folgt implementiert. Als narrensichere Testmethode habe ich zwei Alert-Anweisungen (eine für eine nicht verwandte Funktion) eingefügt. Die erste Alert-Anweisung wird ordnungsgemäß ausgeführt, die zweite wird nie ausgeführt.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
$(function() {      // on document ready 
    var div = $('#showOrHideDiv'); // cache <div> 
    $('#action').click(function() { // on click on the `<a>` 
     alert('here');    // => PROPERLY EXECUTED 
     div.fadeToggle(1000);  // toggle div visibility over 1 second 
    }); 
    // listen for click events originating from elements with href starting with # 
    $('body').on('click.scroll-adjust', '[href^="#"]', function (e) { 
     alert('here');     // => NEVER EXECUTED 
     var $nav; 

     // make sure navigation hasn't already been prevented 
     if (e && e.isDefaultPrevented()) return 

     // get a reference to the offending navbar 
     $nav = $('div.navbox') 

     // check if the navbar is fixed 
     if ($nav.css('position') !== "fixed") return 

     // listen for when the browser performs the scroll 
     $(window).one('scroll', function() { 
     // scroll the window up by the height of the navbar 
     window.scrollBy(0, -$nav.height()) 
     }); 

    }); 
}); 

</script> 

Kann jemand den Fehler in meiner Implementierung aufzeigen?

Answer 1

Es stellte sich heraus, dass es andere Funktionen gab, die ich nicht kannte (danke Jason für den Hinweis). Diese Skripts sorgen für reibungsloses Scrollen, was ein häufiges Merkmal der Art von Vorlagen ist, die ich verwende, daher kann es nützlich sein, hier meine Lösung zu geben.

Am Ende konnte ich das Problem beheben, indem ich einige Zeilen zu einer bestehenden Funktion hinzufügte, ähnlich der, die ich selbst zu implementieren versuchte. Hier

ist der neue Code, mit Kommentaren, wo ich Code hinzugefügt:

$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 

    /* added by me: */ 
    var $x; 
    var $nav; 

    $nav = $('nav#tf-menu') 

    if ($nav.css('position') == "fixed"){ $x=0; } else {$x=$nav.height()+30}; 
    /* end added */ 

    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
    $('html,body').animate({ 

     scrollTop: target.offset().top - 70 - $x //added the -$x 
    }, 1000); 
    return false; 
    } 
} 
}); 
}