Javascript 如何在单击时垂直移动div_Javascript_Jquery

Javascript 如何在单击时垂直移动div

javascript jquery

Javascript 如何在单击时垂直移动div,javascript,jquery,Javascript,Jquery,在这个页面上，我找到了我喜欢的效果，并试图把它放到我的网站上，但在谷歌搜索了六个小时后，仍然一无所获所以，当你们点击导航中的指南时，页脚会向上滑动 #IndexGuide{ position:relative; width:100%; z-index:98; background:#fff; } 是我的div CSS，有了这个函数，我得到了结果，但没有那个页面上的动画 function GuideSlide(){ $('#IndexGuide').cs

在这个页面上，我找到了我喜欢的效果，并试图把它放到我的网站上，但在谷歌搜索了六个小时后，仍然一无所获所以，当你们点击导航中的指南时，页脚会向上滑动

#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;
});

$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
     // after animation stuff
});

我试图修改，但没有结果

这是我在所有浏览器中都能使用的脚本

$(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';
    }
};

用动画制作。像这样的

$('#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;
});

$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
     // after animation stuff
});

您也可以在不将位置编辑为绝对位置的情况下执行此操作，并设置负边距顶部。

请参阅此链接

我希望下面这个简单的例子能为您提供您所期望的解决方案。下面的示例来自链接。我复制了代码，这样你就不需要在网站上搜索了

    <html lang="en">
<head>  
<meta charset="utf-8">  
<title>toggle demo</title>  
<style>  
p {    background: #dad;    font-weight: bold;    font-size: 16px;  }  
</style>  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body> 
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function() 
{  
$( "p" ).toggle( "slow" );
});
</script> 
</body>
</html>

试试这张支票

参考资料

问题出在哪里？如果我点击指南，一页就会向上滑动。你的意思是你不能在你的页面上复制？您是否加载jQuery？给我们一个jsfiddle.netI使用这段代码，幻灯片运行良好。但使用“向下滑动”时，我遇到了问题，因为页面是响应性的，我如何知道要在顶部放置多少像素才能使其恢复原位？是网页的链接！现在再检查一下我使用的响应式布局。我使用这个，但它只在firefox、chrome、ie和opera中起作用，还有其他一些效果。我在想原因。这里是链接。当我第一次点击功能时，它会产生有趣的效果，然后正常工作。在firefox中效果不错，但在其他浏览器中效果很有趣。