Question

请查看此页：http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

右侧的缩略图，链接到不同的投资组合项目（Wordpress单个帖子）。我希望当用户进入页面时，活动项目的缩略图在滚动条中垂直居中。现在，它重置了滚动条，因此人们忽视了导航。如何使用jQuery实现这一目标？

感谢。

Answer 1

首先将“selected”类添加到当前链接的li并使用该类添加边距而不是内联css

看起来您正在使用jScrollPlane Plugin。这将使您使用当前代码执行此类操作。

$（ 'jScrollPaneContainer '）scrollTo（' currentthumb。'）;

请参阅此page for the jScrollPlane scrollTo功能

Answer 2

试试这个并报告发生了什么，我自己无法测试：

$(function() {
    // Get the link that points to the current page
    var $active_link = $('a[href=\''+window.location.href+'\']');        
    // Get the scroll pane that the link is in
    var $scroll_pane = $active_link.closest('#scroll-pane');

    // Get the position where we should scroll
    var scrolltop = $active_link.offset().top - $(window).height() / 2;
    // Scroll amount must be at least 0
    scrolltop = scrolltop < 0 ? 0 : scrolltop;

    // Scroll the scrollpane so that the link sits at the middle
    $scroll_pane.scrollTop(scrolltop);
});

请注意，这需要进行一些改进，但首先您必须确认这适用于您的情况 - 我只是根据jScrollPane的文档猜测滚动窗格部分。

Answer 3

我发现jScrollPane插件有一个他自己的ScrollTo函数：http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html。即使使用jQuery选择器（在底部）。

我设法给当前缩略图一个名为'currentthumb'的课程。

现在我只需要让ScrollTo函数在页面加载时发生而不是在点击事件上发生，对吧？这看起来更容易，不是吗？

感谢。

滚动条中的中心缩略图（jQuery）

3 个答案: