簡體   English   中英

Jscrollpane和內部錨鏈接

[英]Jscrollpane and internal anchor links

我正在使用Jscrollpane,並且一切正常,除非我嘗試將其與內部錨一起使用。 它應該像官方頁面上的示例一樣工作。

但是在我的示例中,它確實破壞了我的網站。 整個內容是向上浮動的,我自己也無法弄清楚。

這是我的頁面: http : //kunden.kunstrasen.at/htmltriest/index.php? site= dieanreise& user_lang=de ,如果單擊了內部錨點: http : //kunden.kunstrasen.at/htmltriest/index.php?網站= dieanreise&user_lang = DE#westautobahn

有人clou這是怎么回事? 謝謝你的幫助。

jspane不適用於舊式錨點,例如

<a name="anchor"></a>

相反,你必須寫

<a id="anchor"></a>

另外,您必須啟用

hijackInternalLinks: true;

在jScrollPane設置對象中。

hijackInternalLinks還會從滾動窗格外部捕獲鏈接,如果只需要內部鏈接,則可以添加此代碼,例如hijackInternalLinks,它將綁定a元素上的點擊功能,並使用目標調用scrollToElement:

            \$(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;
                    }
                });
            });
        });

但請注意,您將始終必須在標簽上使用id屬性。 如果您使用tinymce,則可以使用此功能修復代碼

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;

}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM