如何从 document.ready 调用 jQuery 函数

Question

我有一个带有 jQ​​uery 代码的页面，可以滚动到页面的各个部分。 在每个部分的末尾，我有一个向上箭头可以滚动到页面顶部——它通过在单击箭头时调用 jQuery 函数来工作：

function JumpTo(location) {
    $("faq_content").mCustomScrollbar("scrollTo", location,{
        scrollInertia:500,
        scrollEasing:"easeOut"});
}

当函数 JumpTo 获取到页面顶部的 ID () 时，它会跳转到页面顶部。

页面底部是这个 document.ready 脚本，用于将 jQuery 函数应用于“faq_content”部分：

$( document ).ready(function() {
    $("faq_content").mCustomScrollbar();
});

一切正常。

现在我想跳转到 document.ready 函数中的页面顶部，所以我添加了我在页面其余部分中使用的相同行：

$( document ).ready(function() {
    $("faq_content").mCustomScrollbar();
    JumpTo(bkmk00);" 
});

那行不通。 所以我创建了一个单独的 document.ready 函数：

$( document ).ready(function() {
    $("faq_content").mCustomScrollbar("scrollTo", location,{
        scrollInertia:500,
        scrollEasing:"easeOut"});
}

所以我的问题是：为什么从按钮单击事件调用时完美运行的 jQuery 函数不会在 document.ready 上触发？

谢谢你的帮助。

Answer 1

所以我的问题是：为什么从按钮单击事件调用时完美运行的 jQuery 函数不会在 document.ready 上触发？

因为bkmk00应该是一个包含一些值的变量......

我建议，根据文档......

滚动到

用法 $(selector).mCustomScrollbar("scrollTo",position,options);

对于位置参数，您可以选择top 、 bottom或 id：'#elefirst' 或 '#elelast'。

 $.mCustomScrollbar.defaults.scrollButtons.enable = true; //enable scrolling buttons by default $.mCustomScrollbar.defaults.axis = "yx"; //enable 2 axis scrollbars by default $(".content").mCustomScrollbar(); $('#top').on('click', function (e) { $(".content").mCustomScrollbar("scrollTo", "top", { scrollInertia: 500, scrollEasing: "easeOut" }); //$("faq_content").mCustomScrollbar("scrollTo", '#elefirst'); }) $('#bottom').on('click', function (e) { $(".content").mCustomScrollbar("scrollTo", "bottom", { scrollInertia: 500, scrollEasing: "easeOut" }); //$("faq_content").mCustomScrollbar("scrollTo", '#elelast'); }) // // call mCustomScrollbar on dom ready // $(".content").mCustomScrollbar("scrollTo", "bottom", { scrollInertia: 500, scrollEasing: "easeOut" });

 .content { overflow: auto; position: relative; padding: 20px; background: #333; margin: 10px; width: 740px; max-width: 97%; height: 400px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css"/> <script src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script> <button id="top">Scroll top</button> <button id="bottom">Scroll bottom</button> <div class="content"> <p id="elefirst">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p id="elelast">5</p> </div>