滑动面板向上与jquery slideToggle

我想做一个可扩展的页脚，当你点击'+'号。最初，我有一个很小的页脚，只有版权信息和社交媒体链接。当点击标志时，我想要一个站点地图（和其他一些东西）滑过版权信息。滑动面板向上与jquery slideToggle

但是，我需要确保页面完全向下滚动。如果不是，面板会滑动，但你不能看到它..

这是我现在有：

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

来源

2013-10-10 Helena Standaert

简化了，使滚动间隔由滚动关闭

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

来源

2013-10-10 10:01:51 Martijn

谢谢！但是，我必须将document.offsetHeight更改为document.body.scrollHeight，因为页面将滚动到页面的顶部。 –

改变了解决方案:)现在其他人也可以使用它 – Martijn

更简单的方法是使用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将其与底部对齐）。

来源

2013-10-10 10:56:14

对某些人来说可能很重要的小音符：如果你的动画很慢（可以说10秒），step函数被称为allot。不是一个问题，而是需要保留的一些问题。 – Martijn

滑动面板向上与jquery slideToggle

回答

相关问题