如何使用 jquery 和 javascript 創建自動向下滾動效果？

Question

如何使用 jquery 和 javascript 實現自動向下滾動效果？

<ul>
     <li><a >Beers</a></li>
     <li><a >Community</a></li>
     <li><a  >Shop</a></li>
   </ul>

Answer 1

這是一個簡單的示例，說明如何使用動畫實現底部滾動：

 var button = $("button") // handle click and add class button.on("click", function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })

 body { background: #fff; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } .bottom-wrapper { margin: 0 auto; position: fixed; bottom: 0; left: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> <li><a >Beers</a></li> <li><a >Community</a></li> <li><a >Shop</a></li> </ul> <div class="bottom-wrapper"> <button>Scroll to botom</button> <div>