Jscrollpane und interne Ankerlinks

Question

Ich benutze Jscrollpane und alles funktioniert großartig, außer wenn ich versuche, es mit einem internen Anker zu verwenden. Es sollte wie das Beispiel auf der offiziellen Seite funktionieren.

Aber in meinem Beispiel zerstört es wirklich meine Seite. Der gesamte Inhalt schwebt nach oben und ich kann es nicht selbst herausfinden.

Hier ist meine Seite: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de und wenn der innere Anker angeklickt wird: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de#westautobahn

Hat jemand eine Ahnung, was hier los ist? Vielen Dank für deine Hilfe.

Answer 1

Jspane funktioniert nicht mit alten Ankerstilen zum Beispiel

stattdessen müssen Sie schreiben

Zusätzlich müssen Sie

hijackInternalLinks: true;

im jScrollPane-Einstellungen-Objekt aktivieren.

Die hijackInternalLinks erfasst auch Links von außerhalb des Scrollbereichs, wenn Sie nur interne Links benötigen, können Sie diesen Code hinzufügen, wie hijackInternalLinks bindet er die Click-Funktion an die A-Elemente und ruft scrollToElement mit dem Ziel auf:

            \$(document).ready(function() {
            panes = \$(".scroll");
            //hijackInternalLinks: true;
            panes.jScrollPane({
            });
            panes.each(function(i,obj){
                var pane = \$(obj);
                var api = pane.data('jsp');
                var links = pane.find("a");
                links.bind('click', function() {
                    var uriParts = this.href.split('#');
                    if (uriParts.length == 2) {
                        var target = '#' + uriParts[1];
                        try{
                            api.scrollToElement(target, true);
                        }catch(e){
                            alert(e);
                        }
                        return false;
                    }
                });
            });
        });

aber beachten Sie, dass Sie immer das id-Attribut auf A-Tags verwenden müssen. Wenn Sie tinymce verwenden, können Sie den Code mit dieser Funktion reparieren

function myCustomCleanup(type, value) {
    switch (type) {
            case "get_from_editor_dom":
                    var as = value.getElementsByTagName("a");
                    for(var i=0; i< as.length;i++){
                        if (as[i].hasAttribute('name')){
                            var name = as[i].getAttribute('name');
                            as[i].setAttribute('id',name);
                        }
                    }
                    break;
    }

    return value;

}