Question

所以我正在为一个网站工作，该网站有一个按钮，可以展开/隐藏更多信息（底部是常规页脚，上面是扩展部分）。我现在只使用一个基本的slideToggle，但问题是这会将屏幕滚动到底部位置（点击切换时的位置），因此它会使其外观向下滑动而不是向上滑动。有没有办法强制滚动位置粘在底部，以便内容滑入，一切都可见？

先谢谢大家，这让我疯了，我感觉有点卡住了！

一些更具体的细节 -

HTML：

id location
1  Mumbai,India
2  Lenma,Germany
3  Holi,Finland

CSS：

<div>
  <p>Random Content</p>
  <footer>
    <div class="expand-me">
      <p>Extra Info Here</p>
    </div>
    <div class="main-footer">
      <p>Main Footer Stuff</p>
      <a class="expand">Expand!</a>
    </div>
  </footer>
</div>

JS：

.main-footer {
  text-align:center;
  background-color: #e0e0e0;
  padding:20px;
}
.expand-me {
  display: none;
  background-color: purple;
  padding:20px;
}
.expand {
  cursor:pointer;
  background-color: blue;
  color: white;
  padding: 10px;
}

https://codepen.io/anon/pen/gvmzwB

Answer 1

我通过强制窗口滚动到页面底部来完成此操作。

$( ".expand" ).click(function() {
  $( ".expand-me" ).slideToggle(function(){
     var height = $('#mydiv').height();
       if($(this).is(':visible')){
           $(document).scrollTop($(document).height()-$('.expand-me').height());
       }
    
  });
});

.main-footer {
  text-align:center;
  background-color: #e0e0e0;
  padding:20px;
}
.expand-me {
  display: none;
  background-color: purple;
  padding:20px;
}
.expand {
  cursor:pointer;
  background-color: blue;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>

<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>

<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>

<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>

<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
  <footer>
    <div class="expand-me">
      <p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue.</p>
    </div>
    <div class="main-footer">
      <p>Main Footer Stuff</p>
      <a class="expand">Expand!</a>
    </div>
    
  </footer>
</div>

或喜欢这个

$( ".expand" ).click(function() {
  $( ".expand-me" ).slideToggle(function(){
     var height = $('.expand').height();
       if($('.expand-me').is(':visible')){
           $('html, body').animate({
        scrollTop: $(document).height()
    }, 'slow');
       }
    
  });
});

.main-footer {
  text-align:center;
  background-color: #e0e0e0;
  padding:20px;
}
.expand-me {
  display: none;
  background-color: purple;
  padding:20px;
}
.expand {
  cursor:pointer;
  background-color: blue;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>

<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>

<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>

<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>

<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
  <footer>
    <div class="expand-me">
      <p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nula tortor, convallis non ex ac, rhoncus dictum augue.</p>
    </div>
    <div class="main-footer">
      <p>Main Footer Stuff</p>
      <a class="expand">Expand!</a>
    </div>
  </footer>
</div>

有没有办法从页脚使用幻灯片切换，同时保持底部的滚动位置？

1 个答案: