Question

我有两个网站，它们共享一个“滚动到顶部”箭头，当您向下滚动页面时会显示该箭头。一个出现在iPhone和iPad上，另一个没有出现，我不知所措以解释原因。

此版本有效：https://www.championfreight.co.nz/

HTML

<a href="#" class="responsive-picture picture-link-arrow-1" title="Scroll To Top" id="scrollToTop">
<picture>
<img alt="Scroll to top icon" srcset="https://www.championfreight.co.nz/uploads/arrow_up_01_45.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</picture>
</a>

CSS

a.responsive-picture.picture-link-arrow-1 {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 99;
  margin-top: 7px;
  margin-right: 2%;
  margin-bottom: 20px;
  max-width: 2.8125em;
}

JS

$(document).ready(function() {
  $('#scrollToTop').hide().click(function(){
            $('html, body').animate({scrollTop : 0},2000, 'swing');
        return false;
  });
});

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 80) {
        $(".picture-link-arrow-1").fadeTo(0,0).hide();
    } else {
        $(".picture-link-arrow-1").fadeTo(0,1).show();
    }
});

此版本不起作用：https://www.citychurchchristchurch.co.nz

HTML

<a href="#" class="responsive-picture picture-link-arrow-1" title="Scroll to top" id="scrollToTop"><picture><img alt="Scroll To Top Arrow" srcset="https://www.citychurchchristchurch.co.nz/img/arrow_up_01_45.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></picture></a>

CSS

a.responsive-picture.picture-link-arrow-1 {
  position: fixed;
  display:block;
  right: 0;
  bottom: 0;
  z-index: 99;
  margin-right: 2%;
  margin-bottom: 20px;
  max-width: 45px;
  display:none;
}

注意：此版本在CSS中包含“ display：none”，但我已经测试过，并且没有什么区别。我包含了它，以防止您在加载新页面时在屏幕上闪烁（可见的瞬间）。

JS

$(document).ready(function() {
  $('#scrollToTop').hide().click(function(){
        $('html, body').animate({scrollTop : 0},1500, 'swing');
        return false;
  });
});

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 80) {
        $(".picture-link-arrow-1").fadeTo(0,0).hide();
    } else {
       $(".picture-link-arrow-1").fadeTo(0,1).show();
    }
 });

不会出现在iPhone或iPad上

0 个答案: