從該部分向下滾動 100 像素時顯示“返回頂部”

Question

我知道如何在從 window 頂部滾動 100 像素后顯示“返回頂部”按鈕，但我想在從某個部分/div 向下滾動 100 像素（例如）后顯示它，但我找不到解決方案。 我有一個文本和上面的圖像，文本在一個部分，圖像在另一個部分，所以我希望按鈕在從帶有圖像的部分滾動 100px 后淡入，並從同一部分的末尾停止 100px .

 $(document).ready(function() { $('.back-to-top').hide(); var scrollBottom = $(".images").height() - 100; // stop the button 100px from the end of the section $(window).scroll(function() { if ($(".images").scrollTop() > 100) { $('.back-to-top').show().fadeIn(); } else { $('.back-to-top').fadeOut().hide(); } }); });

 #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; }.back-to-top { padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; position: absolute; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">&uarr;</a>

Answer 1

發生undefined的行為是因為您 select 錯誤的項目並使用了scrollTop()方法。 當您在window object 上使用scrollTop()方法時，您將看到問題已解決。 此外，我在.back-to-top class 樣式中為position樣式分配了一個fixed值。

 $(document).ready(function() { $('.back-to-top').hide(); $(window).scroll(function() { console.clear(); console.log(`Scroll: ${$(this).scrollTop()}`); if ($(this).scrollTop() > 100) /* edited */ $('.back-to-top').show().fadeIn(); else $('.back-to-top').fadeOut().hide(); }); });

 #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; }.back-to-top { position: fixed; /* edited */ padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">&uarr;</a>

Answer 2

首先，您必須制作一個fixed在 CSS 中的按鈕 position，以便在滾動整頁時出現，如下所示：

.back-to-top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    padding: 20px;
    display: inline-block;
    text-decoration: none;
    background-color: #FFF;
    color: #000;
    border-radius: 50px;
  }

並在 jquery 中僅使用fadeIn或fadeOut而不是fadeOut().hide()並使用fadeIn(milliSeconds)進行動畫處理

Jquery 代碼將是這樣的：

$(document).ready(function() {

    console.log('Started')

    $('.back-to-top').hide();
  
    $(window).scroll(function() {
      if ($(document).scrollTop() > 100) {
        $('.back-to-top').fadeIn(1000);
        console.log('More Than 100')
      } else {
        $('.back-to-top').fadeOut(1000);
      }
    });
  });