jQuery jScrollpane的scrollToElement

我想在这里使用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-的定义 – 包装类。