使用 jquery slideToggle 向上滑动面板答案

【问题标题】：Slide panel upwards with jquery slideToggle使用 jquery slideToggle 向上滑动面板
【发布时间】：2013-10-10 09:55:31
【问题描述】：

我想制作一个可在您单击“+”号时展开的页脚.. 最初，我的页脚很小，只有版权信息和社交媒体链接。当点击标志时，我想要一个站点地图（和其他一些东西）滑到版权信息上方。

但是，我需要确保页面保持完全向下滚动。如果没有，面板会滑动，但您将看不到它..

这是我现在拥有的：

HTML

<div id="footer-wrapper" class="clearfix">
    <footer>
        <span id="footer-expander">+</span>
        <section id="footer-hidden" class="clearfix">
            <section id="sitemap" class="cols-3">
                <h1>Sitemap</h1>
                <ul>

                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </section>
            <section class="cols-3">
                <h1>Something else</h1>
            </section>
            <section class="cols-3">
                <h1>Last, but not least.</h1>
            </section>
        </section>
        <section id="footer-show" class="clearfix">
            <p>&copy; Helena Standaert.</p>
            <section id="btm-socialmedia" class="socialmedia">
                <ul>
                    <li class="twitter"><a href="">Twitter</a></li>
                    <li class="facebook"><a href="">Facebook</a></li>
                    <li class="linkedin"><a href="">LinkedIn</a></li>
                    <li class="rss"><a href="">RSS-feed</a></li>
                </ul>
            </section>
        </section>
    </footer>
</div>

JQUERY

$('#footer-expander').click(function(){
    $('#footer-hidden').slideToggle('slow', function(){
        goToByScroll('footer-wrapper')
        if($('#footer-expander').html('-')){
            $('#footer-expander').html('+');
        }
        if($('#footer-expander').html('+')){
            $('#footer-expander').html('-');
        }
    });
})

【问题讨论】：

标签： jquery html slidetoggle

【解决方案1】：

简单，做一个滚动间隔，被滚动关闭

var pageScroller = setInterval(function(){ 
                       scrollTo(0, document.scrollHeight)}, // Scroll to bottom
                       100 // every 100 ms correct. Can be 50, or 25, or whatever
                    );
$('#footer-hidden').slideToggle(600, function(){
    clearInterval( pageScroller ); // stop the interval which was scrolling
});

【讨论】：

谢谢！但是，我不得不将 document.offsetHeight 更改为 document.body.scrollHeight，因为页面会滚动到页面顶部。
更改了解决方案 :) 现在其他人也可以使用它了

【解决方案2】：

更简单的方法是使用 sliteToggle 的 STEP 选项。

只需使用以下内容更新您的 javascript（通过适当的元素更改 FOOTER_CONTAINER，该元素应该是您的页脚的包装器）：

$('#footer-expander').click(function(){
    $('#footer-hidden').slideToggle({duration: 'slow', step: function(){
        $(FOOTER_CONTAINER).scrollIntoView(false);
    }, complete: function(){
      goToByScroll('footer-wrapper')
        if($('#footer-expander').html('-')){
            $('#footer-expander').html('+');
        }
        if($('#footer-expander').html('+')){
            $('#footer-expander').html('-');
       }
    }});
});

有了这个，函数

$(FOOTER_CONTAINER).scrollIntoView(false);

将在每一步调用，并将您的容器滚动到视图中（false 将其与底部对齐）。

【讨论】：

对某些人来说可能很重要的小提示：如果您的动画时间很慢（比如说 10 秒），则 step 函数被称为分配。不是 neccecary 的问题，而是要保持可能的东西。