如何在单击时自动滚动到div

时间:2014-08-10 23:26:08

标签: javascript jquery html scroll

我想在用户点击它时让我的页面自动滚动到div。我使用的jQuery只在它第一次点击时才有效。之后它即使在点击功能中也不会产生任何结果。正确计算元素偏移量变量,我可以在日志中看到它。但是在第二次单击时没有任何反应这是我的jQuery:

$('.logoWrap').click(function () {

    var body = $("html, body");
    var scrollTop = $(window).scrollTop();
    var elementOffset = $(this).offset().top;
    var distance = (elementOffset - scrollTop);
    body.animate({
        scrollTop: distance
    }, '500', 'swing');)
};

我无法使用和锚定ID的原因是因为当点击div时,会有另一个div向下滑动以显示更多内容。所以我认为这是搞乱的事情。这是我的全部代码

    $('.logoWrap').click(function(){


            var body = $("html, body");
            var scrollTop     = $(window).scrollTop();
            var elementOffset = $(this).offset().top;
            var distance      = (elementOffset - scrollTop);
            body.animate({scrollTop:elementOffset}, '500', 'swing');


        if($(this).next('article').is(':visible')){

            $(this).parent().animate({marginBottom : 0},'2000');
            $(this).removeClass('activeWork');
            $(this).next('article').slideUp('2000');
        }



        else if($('.logoWrap').hasClass('activeWork')){

            $('.activeWork').next('article').slideUp('2000');
            $('.activeWork').parent().animate({marginBottom : 0},'2000');
            $('.activeWork').removeClass('activeWork');


            var articleHeight = $(this).next('article').height();
            var desiredHeight = articleHeight + 100;

            //open content
            $(this).addClass('activeWork');         
            $(this).next('article').delay('500').slideDown('2000');
            $(this).parent().delay('500').animate({marginBottom : desiredHeight},'2000');   
        }



        else{

        var articleHeight = $(this).next('article').height();
        var desiredHeight = articleHeight + 100;
        //open content
            $(this).addClass('activeWork');         
            $(this).next('article').slideDown('2000');
            $(this).parent().animate({marginBottom : desiredHeight},'2000');                






        }

0 个答案:

没有答案
相关问题