从该部分向下滚动 100 像素时显示 'back to top'

Question

我知道如何在从 window 顶部滚动 100px 后显示 'back to top' 按钮，但我想在向下滚动 100px 后显示它（因为例如）来自某个<section>/<div>，我找不到解决方案。我有一个文本和上面的图像，文本在一个部分，图像在另一个部分，所以我希望按钮在从图像部分滚动 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

我使用 @ShawnWhinnery 开发的 getPosition() 方法开发了一个解决方案。另外，我在 .back-to-top class 样式中为 position 样式分配了一个 fixed 值。如果你想在到达 <section> 元素的末尾时隐藏 <button> ，你可以遵循相同的逻辑；在这种情况下，只需计算 <section> 元素的高度。

$(document).ready(function() {
  $('.back-to-top').hide();
  
  function getPosition(element) {
      var xPosition = 0, yPosition = 0;

      while(element) {
          xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
          yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
          element = element.offsetParent;
      }
      return { x: xPosition, y: yPosition };
  }

  $(window).scroll(function() {
    let staticPosition = getPosition(document.getElementById('images')).y;
    
    console.clear();
    console.log(`Dif: ${this.scrollY - staticPosition} Scroll: ${this.scrollY} Element: ${staticPosition}`);
  
    if (this.scrollY - staticPosition > 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 {
  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

首先，您必须在 CSS 中创建一个按钮位置 fixed，以便在滚动整个页面时显示，如下所示：

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

从该部分向下滚动 100 像素时显示 'back to top'

Show 'back to top' when scrolling down 100px from the section

javascript

jquery

scroll