jquery滚动悬停div的高度

时间:2013-08-26 16:23:06

标签: jquery wordpress

我有一个wordpress循环。每篇文章都有“.post”类。我为每个.post都有一个类“.skip”的按钮。单击该按钮时,我希望页面滚动到循环中的下一个.post。

我正在使用这个

$(function(){
    $(window).scroll(function(){
        $(".post").each(function(){
            var height = $(".post").height();
            var scroll = $(window).scrollTop();
            $(".skip").click(function(){
                $(window).scrollTop(scroll+height);
            });
        });
    });
});

有些事情已经完成,但并非如此!

我的意思是......页面会在点击时滚动,但会显示第一个.post的高度(无论.skip按钮属于什么。)

帮助!

来自wp循环的.post容器

<article <?php post_class(); ?>>
    <div class="skip">skip</div>
    <?php if ( has_post_thumbnail()) :  ?>
        <div class="container">
            <div>
                <?php the_post_thumbnail(); ?>
            </div>
        <h2 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        </div>
    <?php else: ?> 
        <h2 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <?php endif; ?>
    <?php the_content(); ?>
    <a href="<?php the_permalink(); ?>" class="more">more</a>
</article>

2 个答案:

答案 0 :(得分:1)

$(function () {
    $(".skip").click(function () {
        var height = $(this).parent('article').height();
        var scroll = $(window).scrollTop();
        $(window).scrollTop(scroll + height);
    });
});

答案 1 :(得分:0)

你应该试试这个

$(function(){
    $(window).load(function(){
        $(".post .skip").click(function(){
            var height = $(this).parent(".post").height();
            var scroll = $(window).scrollTop();

            $(window).scrollTop(scroll+height);
        });
    });
});

你不能在click事件回调之外初始化var“scroll”,但是这将是0(初始顶部滚动:页面顶部= 0)。