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,它考虑了边距和填充的值.

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