javascript - 如何在点击时垂直移动div

Question

在这个页面上，我找到了我喜欢的效果，并尝试将其放在我的网站上，但经过六个小时的谷歌搜索仍然没有任何结果 http://terranea.demos.sabrehospitality.com/ 因此，当您单击导航页脚中的“指南”时，向上滑动。

#IndexGuide{
    position:relative;
    width:100%;
    z-index:98;
    background:#fff;
}

是我的 div CSS，通过这个函数我得到结果，但没有像该页面上那样的动画

function GuideSlide(){
    $('#IndexGuide').css({
            'position': 'absolute',
            'top': '80px',
            'z-index': '100'
        });
};

我查看他们的页面源代码，他们做了类似的事情

$('#guide-toggle').click(function () {
    $(this).toggleClass('active');
    $('#guide-close').toggleClass('visible');
    $('#work-cont').slideToggle();
    $('#myModal2 .close').click();
    if ($(this).hasClass('active')) {
        currentOffset = $(document).scrollTop();
        scrollPageTo(0);
    } else {
        scrollPageTo(currentOffset);
    }
    if($('#masthead,#myCarousel').length>0) {
        $('#masthead,#myCarousel').slideToggle();   
    }
    return false;
});

我尝试修改，但没有结果。

这是适用于我的所有浏览器的脚本!

$(document).ready(function() {
    var windowHeight = $(window).height();
    var lineHeight = $('#IndexGuide').height();
    var newPosition = windowHeight + (lineHeight - 35);
    $("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
    if(flag == 'up'){
    $("#IndexGuide").animate({"top": "80px"}, 1000);
        flag = 'down';
    } 
    else {
    var windowHeight = $(window).height();
    var lineHeight = $('#IndexGuide').height();
    var newPosition = windowHeight + (lineHeight - 35);
    $("#IndexGuide").animate({top:newPosition}, 1000, function(){});
        flag = 'up';
    }
};

Answer 1

试试这个检查 fiddle

<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>

js

var flag = "up";
$(".open-modal").click(function(){
    if(flag == "up"){
    $("#IndexGuide").css({
        "position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {

    });
        flag = 'down';
    } else {
        $("#IndexGuide").css({
        "position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {

    });

        flag = 'up';
    }
})

引用https://stackoverflow.com/a/15626812/1699833