Javascript Can'；将animatescroll插件挂钩到绑定方法

对js/jQuery来说还是很新的，但我认为将代码与HTML标记分离是最好的做法

我正在使用animateScroll，我很惊讶地看到 按钮上的代码如下所示

<div id="MainContent">

<ul id="Gallery" class="container gallery">

    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
    <li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" class="destroy"/></a></li>
    <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" class="destroy"/></a></li>
    <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" class="destroy"/></a></li>
    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
</ul>
<button class="top">click me</button>

点击我

更奇怪的是，我试图使用这个（这是我问题的本质），但它不起作用

jquery：

<script src="text/javascript">
$(function() {
    $('.top').bind('click', function (){
    $('#Gallery').animatescroll();
});
});

</script>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>

$（函数（）{
$（'.top'）.bind（'click'，函数（）{
$（“#图库”）.animatescroll（）；
});
});

遵循尤里·塔拉班科的指示（在评论中）

请尝试此代码。。。如果动态生成“.top”元素

$(document).ready(function () {
    $('body').on('click', '.top', function () {
        $('#Gallery').animatescroll();
    });
});

始终将依赖项文件放在任何脚本之前：

<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>

<script src="text/javascript">
    $(document).ready(function () {
        $('.top').on('click', function (){
            $('#Gallery').animatescroll();
        });
    });

</script>

$（文档）.ready（函数（）{
$（'.top'）。在（'click'，函数（）{
$（“#图库”）.animatescroll（）；
});
});

代码的其余部分（animatePlugin:）与此无关

---

控制台中有错误吗？确保在jquery.js之后加载脚本。检查控制台是否有错误。您是否包含包含animatescroll函数的js文件？没有错误，我包含了.js文件…您是否真的在包含jQuery之前尝试使用它？这就是您的

标记在代码中的顺序吗？请参阅我的编辑，并告诉我您的animatePlugin代码是否真的放在结尾标记之后。我按照您的建议，在#4下尝试了代码。但还是没什么…谢谢！它可能是开发人员创建的，所以它只能通过内联放置工作吗？不，不是。每个内联代码也可以在标记中工作。