CODEWITHSUNDEEP
jqueryjscrollpane
nickff
nickff

Reputation: 268

jQuery jScrollpane's scrollToElement

I'm looking to use jScrollPane's "scrollToElement" API function here:

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

Instructions on it's usage can be found here:

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

The issue I'm having is with the "stickToTop" argument. When clicking the arrows, I want it to bring the targeted div to the top of the viewport (not just barely visible as it's currently doing). The "stickToTop" argument is supposed to be handling this, but I can't get it to work.

I've tried implementing this as follows, but with no luck:

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

and I've tried:

api.scrollToElement(target_div_id, true);

here's my current full code:

$(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;
        }
    );
});

ANY help on how to get jScrollPane's "stickToTop" argument to workfor the "scrollToElement" method would be MUCH appreciated!

Upvotes: 2

Views: 6471

Answers (1)

WTK
WTK

Reputation: 16961

Your code is working fine in general, the reason why it seems that the stickToTop option isn't, is the css for the proposal-X divs.

stickToTop does scroll those divs so they are at the top of the page, BUT to determine their upper edge it uses margin-top and padding-top values. So after the scroll it appears as the top edge of the *target_div_id* div isn't at the top of the page (which isn't true). It is, it's just jScrollpane that take values of margin and padding into consideration.

The solution for this problem is simple, wrap the proposal-X divs in yet another div (lets say with a class .proposal-wrapper. Then move the css margin-top and padding-top definitions from proposal divs to definition of .proposal-wrapper class.

Upvotes: 6

Related Questions