Question

我有一个带有jQuery代码的页面，可滚动到页面的各个部分。在每个部分的末尾，我都有一个向上箭头滚动到页面顶部-单击箭头时，它会通过调用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 应该是一个包含一些值的变量.....

我建议According to the documentation ......

scrollTo

使用$（selector）.mCustomScrollbar（“ scrollTo”，position，options）;

对于position参数，您可以选择 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>

如何从document.ready调用jQuery函数

1 个答案: