当从文件导入html时，Smooth涡旋无法工作。

Question

我在使用jquery导入html时遇到了问题。导入此文本将破坏平滑滚动插件。

使用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>

当我点击我的菜单中的链接平滑滚动工作，但当我点击导入的链接，我只是指向页面www.peterstreef.nl/scrolltest/#摄影跳到该部分。

如果我在此div之前或之后添加平滑滚动链接，则链接工作正常，因此它与包含顺序无关。

所以我的问题是，如何在不破坏平滑滚动的情况下导入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'});
    });
});