jQuery jScrollpane的scrollToElement

Question

我想在这里使用jScrollPane的“scrollToElement”API函数：

http://dextersgospel.com/index-test.html

有关其用法的说明，请访问：

http://jscrollpane.kelvinluck.com/api.html#scrollTo

我遇到的问题是“stickToTop”参数。单击箭头时，我希望它将目标div带到视口的顶部（不仅仅是它当前正在进行的几乎不可见）。 “stickToTop”参数应该是处理这个，但是我无法让它工作。

我尝试过如下实现，但没有运气：

api.scrollToElement(target_div_id, {stickToTop: true});

我试过了：

api.scrollToElement(target_div_id, true);

这是我目前的完整代码：

$(function()
{
    /* INITIALIZES jScrollPane on ENTIRE BROWSER WINDOW */
    var win = $(window);
    var isResizing = false;
    var container = $('#full-page-container');
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows':          false,
                        'mouseWheelSpeed':     75,
                        'contentWidth':        960, //So content doesn't jump around
                        'animateScroll':       true,
                        'animateDuration':     600,
                        'hijackInternalLinks': true //HAD TO HAVE THIS FOR ANCHORS TO WORK!
                    }
                );
            } 
        }
    ).trigger('resize');

    //Awesome scrollToY function for our duct tape arrows - no flicker + built w/jScrollPane
    var api = container.data('jsp');
    $('.proposal').bind(
        'click',
        function()
        {
            var target_div_id = '#' + $(this).attr("title"); // gives you the TITLE of the clicked link
            api.scrollToElement(target_div_id, true);
            return false;
        }
    );
});

有关如何让jScrollPane的“stickToTop”参数适用于“scrollToElement”方法的任何帮助将非常感谢！

Answer 1

您的代码一般工作正常，stickToTop选项似乎不是的原因，是提案-X div的css。

stickToTop会滚动这些div，因此它们位于页面的顶部，但是要确定它们的上边缘它使用 margin-top 和 padding-top 值。因此，在滚动后，它显示为* target_div_id * div的上边缘不在页面的顶部（这不是真的）。它就是jScrollpane，它考虑了边距和填充的值。

此问题的解决方案很简单，将提案-X div包装在另一个div中（假设用类 .proposal-wrapper 。然后移动css margin-top和padding-top定义从提案div到 .proposal-wrapper 类的定义。