滚动出此元素时,必须做些什么才能在div和fadOut上进行fadeIn?

时间:2019-06-17 09:11:47

标签: javascript

我换了一行:

$('html, body').animate( { scrollTop: 0 }, duration);

滚动到div位置:

  $('html, body').animate( { scrollTop: $(".product-single__title").offset().top},
        'slow');
     return false;

效果很好,但是我也需要将动画位置移到div元素上。

P.S。对不起,我的英语,谢谢您的帮助。

这是默认代码段。

{% comment %} 
      Reduce below value if you need the back to the top button to appear higher up on the page. 
      That value is in pixels.
    {% endcomment %}
    {% assign vertical_offset_for_trigger = 300 %}
    {% comment %} 
      Vertical offset from bottom of browser for the position of the button.
    {% endcomment %}
    {% assign position_from_bottom = '4em' %}
    <a href="#" title="Back to the top" class="back-to-top">
      <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i> 
    </a>
    {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
    <style>
    .back-to-top {
      position: fixed;
      bottom: {{ position_from_bottom }};
      right: 0px;
      text-decoration: none;
      color: #999;
      background-color: #eee;
      font-size: 16px;
      padding: 0.3em;
      display: none;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-bottomleft: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      z-index: 60000;
    }
    .back-to-top i {
      vertical-align: middle;
    }
    .back-to-top span {
      padding-left: 0.5em;
    }
    .back-to-top i + span {
      padding-left: 0;
    }
    .back-to-top:hover {
      text-decoration: none;
      color: #555;
    }
    </style>
    <script>
    window.onload = function() {
     jQuery(function($) {
       var offset = {{ vertical_offset_for_trigger }};
       var duration = 500;
       $(window).scroll(function() {
         if ($(this).scrollTop() > offset) {
           $('.back-to-top').fadeIn(duration);
         } 
         else {
           $('.back-to-top').fadeOut(duration);
         }
       });
       $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
         e.preventDefault();
         $('html, body').animate( { scrollTop: 0 }, duration);
         return false;
       })
     });
    }
    </script>

1 个答案:

答案 0 :(得分:0)

如果需要的话,可以使用pageXOffset,pageYOffset和scrollTop确定要在其上进行操作的页面位置。

如果要将其应用于其他元素,则可以更改选择器,在这种情况下,     $('。back-to-top')到您要使用的div的选择器     $('。yourDivElement')。

能否请您多解释一下您想要实现的目标? 这些注释是您的还是属于原始脚本?