滚动条中的中心缩略图(jQuery)

时间:2010-01-05 20:39:19

标签: jquery scrollbar alignment

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

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

感谢。

3 个答案:

答案 0 :(得分:0)

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

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

$( 'jScrollPaneContainer ')scrollTo(' currentthumb。');

请参阅此page for the jScrollPlane scrollTo功能

答案 1 :(得分:0)

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

$(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的文档猜测滚动窗格部分。

答案 2 :(得分:0)

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

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

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

感谢。