Question

我在使用jquery导入html时遇到问题。导入此文本将破坏smoothscroll插件

使用jquery导入html：

$(document).ready
    (
        function() 
        {
            $("#about_div").load("test_scroll.html");
        }
    );

我加载以下html行：

<a href="#photography" class="smoothScroll"> Photography</a>

在查看页面来源时，我也看到了：

<a href="#photography" class="smoothScroll"> Photography</a>

在我的菜单中，我有完全相同的代码（但未导入）：

<a href="#photography" class="smoothScroll"> Photography</a>

当我点击菜单中的链接时，smoothscroll有效，但当我点击导入的链接时，我只是指向页面www.peterstreef.nl/scrolltest/ #photography跳转到该部分。

如果我在此div之前或之后添加smoothscroll链接，链接可以正常工作，因此它与包含顺序无关。

所以我的问题是，如何在不破坏smoothscroll的情况下导入HTML？我做了一个简单的测试页来重现问题： www.peterstreef.nl/scrolltest/

Answer 1

如果您打开smoothscroll.js文件，最后您会看到：

// Initialize all .smoothScroll links
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });

这意味着，在加载时，库只会初始化现有链接，并且不会考虑随后使用 .load（）加载的其余链接。

此问题的解决方案是再次初始化已加载的a.smoothScroll。为此，您可以将JS代码更改为：

$(document).ready(function() {
    $("#about_div").load("test_scroll.html", function() {
       $("#about_div").localScroll({filter:'.smoothScroll'});
    });
});

从文件导入html时，Smoothscroll无法正常工作

1 个答案: